Скрыть полосу прокрутки, но все еще в состоянии прокрутки

Легко в Webkit, с дополнительным стилем:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}

Это работает для меня:

.container {
    -ms-overflow-style: none;  // IE 10+
    overflow: -moz-scrollbars-none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Примечание: В последних версиях Firefox свойство -moz-scrollbars-none устарело (ссылка).

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Это трюк, чтобы несколько перекрывать полосу прокрутки с перекрывающимся div, который не имеет полос прокрутки

::-webkit-scrollbar { 
    display: none; 
}

это только для браузеров webkit. или вы можете использовать браузер css (если он есть в будущем) каждый браузер может иметь различное и конкретное свойство для своих соответствующих баров.

- EDIT -

Для Microsoft Edge используйте: -ms-overflow-style: -ms-autohiding-scrollbar; или -ms-overflow-style: none; как для MSDN.

Нет эквивалента для FF Хотя есть плагин JQuery для достижения этого http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

ОБНОВЛЕНИЕ: Firefox теперь поддерживает скрытие полос прокрутки с помощью CSS, поэтому теперь доступны все основные браузеры (Chrome, Firefox, IE, Safari и т.д.). Просто примените следующий CSS к элементу, из которого вы хотите удалить полосы прокрутки:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0px;
}

Это наименее хакерское кросс-браузерное решение, которое я знаю в настоящее время. Проверьте демо.

ОРИГИНАЛЬНЫЙ ОТВЕТ:

Вот еще один способ, который еще не был упомянут. Это действительно просто и включает в себя только два div и CSS. Не требуется JavaScript или собственный CSS, и он работает во всех браузерах. Это не требует явной установки ширины контейнера, что делает его жидким.

Этот метод использует отрицательное поле, чтобы переместить полосу прокрутки за пределы родительского элемента, а затем то же количество отступов, чтобы вернуть содержимое в исходное положение. Техника работает для вертикальной, горизонтальной и двусторонней прокрутки.

Демонстрации:

• вертикальный
• горизонтальный
• Оба направления

Пример кода для вертикальной версии:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent{
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.child{
  height: 100%;
  margin-right: -50px; /* maximum width of scrollbar */
  padding-right: 50px; /* maximum width of scrollbar */
  overflow-y: scroll;
}

В этом ответе не содержится кода, так что вот решение со страницы:

Согласно странице этому подходу не нужно знать ширину полосы прокрутки впереди время для того, чтобы работать, и решение работает для всех браузеров тоже, и их можно увидеть здесь.

Хорошо, что вы не вынуждены использовать разметку или ширину, чтобы скрыть полосу прокрутки.

Это также повышает масштабируемость. Решения для заполнения/ширины показывают полосу прокрутки при увеличении до минимума.

Исправление FF: http://jsbin.com/mugiqoveko/1/edit?output

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>

Просто используйте следующие 3 строки, и ваша проблема будет решена:

 #liaddshapes::-webkit-scrollbar {
        width: 0 !important;
    }

Где liaddshape - это имя div, где выполняется scrool.

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Примените CSS соответственно.

Проверьте это здесь (проверено в IE и FF).

#subparant{
    overflow:hidden;    
    width: 500px;
    border: 1px rgba(0,0,0,1.00) solid;
}

#parent{
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity:10%;
}

#child{
    width:511px;
    background-color:rgba(123,8,10,0.42);
}

<body>
    <div id="subparant">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

Вызовите эти функции для любой точки, которую вы хотите загрузить или выгрузить или перезагрузить полосу прокрутки. Все еще прокручивается в Chrome, когда я тестировал его в Chrome. Не уверен в других браузерах.

Моя проблема: мне не нужен какой-либо стиль в моем html, я хочу, чтобы мое тело прокручивалось без полосы прокрутки и только вертикальный свиток, работающий с css-сетками для любого размера экрана.

Эффекты отбрасывания размера коробки или маржинальные значения, они работают с коробкой: размер содержимого.

Мне все еще нужна директива "-moz-scrollbars-none", и, как gdoron и Mr_Green, мне пришлось скрывать полосу прокрутки. Я попробовал -moz-transform и -moz-padding-start, чтобы воздействовать только на firefox, но были ответные побочные эффекты, которые необходимо было много работать.

Это решение работает для содержимого html body с стилем "display: grid", и оно реагирует.

/* hide html and body scroll bar in css-grid context */
html,body{
  position: static; /* or relative or fixed ... */
  box-sizing: content-box; /* important for hidding scrollbar */
  display: grid; /* for css-grid */
  /* full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}
html{
  -ms-overflow-style: none;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  background: transparent;
  visibility: hidden;
  width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make html with overflow hidden */
  html{
    overflow: hidden;
  }
  /* Make body max height auto */
  /* set right scroll bar out the screen  */
  body{
    /* enable scrolling content  */
    max-height: auto;
    /* 100vw +15px : trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);
    /* set back the content inside the screen */
    padding-right: 15px;
  }
}
body{
  /* allow vertical scroll */
  overflow-y: scroll;
}

В современных браузерах вы можете использовать wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
content.addEventListener('wheel', function(e) {
  const step = 100; // how many pixels to scroll
  if(e.deltaY > 0 ) // scroll down
     content.scrollTop += step;
  else //scroll up
     content.scrollTop -= step;
});

Вот как я делаю это для горизонтального прокрутки, только CSS и хорошо работает с такими фреймворками, как bootstrap/col *. Для этого требуется только 2 дополнительных div и родительский с шириной или максимальной шириной:

Вы можете выбрать текст, чтобы он прокручивал или прокручивал его пальцами, если у вас есть сенсорный экран.

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.row {width:100%}
.col-xs-4 {width:33%;float:left}
.col-xs-3 {width:25%;float:left}
.bg-gray{background-color:#DDDDDD}
.bg-orange{background-color:#FF9966}
.bg-blue{background-color:#6699FF}
.bg-orange-light{background-color:#FFAA88}
.bg-blue-light{background-color:#88AAFF}

<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Краткая версия для ленивых людей:

.overflow-x-scroll-no-scrollbar {overflow:hidden;}
.overflow-x-scroll-no-scrollbar div {
  overflow-x:hidden;
  margin-bottom:-17px;
  overflow-y:hidden;
  width:100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x:auto;
  width:100%;
  padding-bottom:17px;
  white-space: nowrap; 
  cursor:pointer
}

/* the following classes are only here to make the example looks nicer */
.parent-style {width:100px;background-color:#FF9966}

<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

Добавление дополнения к внутреннему div, как и в принятом в настоящее время ответе, не будет работать, если по какой-либо причине вы хотите использовать box-model: border-box.

Что работает в обоих случаях, это увеличение ширины внутреннего div до 100% плюс ширина полосы прокрутки (предполагая overflow: hidden на внешнем div).

Например, в CSS:

.container2 {
    width: calc(100% + 19px);
}

В Javascript, кросс-браузер:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';

По состоянию на 11 декабря 2018 года (Firefox 64 и выше) ответ на этот вопрос действительно очень прост, поскольку Firefox 64+ теперь реализует спецификацию CSS Scrollbar Styling.

Просто используйте следующий CSS:

scrollbar-width: none;

Ссылка на выпуск Firefox 64 здесь.

Я пытаюсь использовать вышеупомянутые решения в своем проекте, и по какой-то причине я не смог скрыть полосу прокрутки из-за расположения div. Поэтому я решил скрыть полосу прокрутки, представив div, который покрывает его поверхностно. Пример ниже для горизонтальной полосы прокрутки:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

Соответствующий CSS выглядит следующим образом:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

perfect-scrollbar плагин, похоже, идет по пути: https://github.com/noraesae/perfect-scrollbar

Это хорошо документированное и полное решение на основе JS для проблемы прокрутки.

Демо-страница: http://noraesae.github.io/perfect-scrollbar/

Это решение типа divitis, которое не должно работать для всех браузеров...

Разметка выглядит следующим образом и должна быть внутри чего-то с относительным позиционированием (и его ширина должна быть установлена, например, 400 пикселей):

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}

это будет в теле:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

и это css:

#maincontainer 
{
background:grey ;
width:101%;
height:101%;
overflow:auto;
position:fixed;
}

#child 
{
background: white;
height:500px;
}

Другой вид взломанного подхода - сделать overflow-y: hidden а затем вручную прокрутить элемент примерно так:

function detectMouseWheelDirection( e ) {
  var delta = null, direction = false;
  if ( !e ) { // if the event is not provided, we get it from the window object
    e = window.event;
  }
  if ( e.wheelDelta ) { // will work in most cases
    delta = e.wheelDelta / 60;
  } else if ( e.detail ) { // fallback for Firefox
    delta = -e.detail / 2;
  }
  if ( delta !== null ) {
    direction = delta > 0 ? -200 : 200;
  }

  return direction;
}

if ( element.addEventListener ) {
 element.addEventListener( 'DOMMouseScroll', function( e ) {
   element.scrollBy({ 
     top: detectMouseWheelDirection( e ),
     left: 0, 
     behavior: 'smooth' 
  });
 });
}

Там большая статья о том, как обнаружить и иметь дело с onmousewheel событий в deepmikoto в блоге. Это может сработать для вас, но это, безусловно, не изящное решение.

Еще одна простая работа fiddle.

#maincontainer {
    background: orange;
    width:200px;
    height:200px;
    overflow:hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width:200px;
    height:200px;
    top:20px;
    left:20px;
    overflow:auto;
}

Переполнение скрывается в родительском контейнере и переполняется автоматически в дочернем контейнере. Простой.

Я просто хотел поделиться комбинированным фрагментом для скрытия полосы прокрутки, которую я использую при разработке. Это коллекция из нескольких фрагментов, найденных в интернете, которая работает для меня:

    .container {
        overflow-x: scroll; /* for horiz. scroll, otherwise overflow-y: scroll; */

        -ms-overflow-style: none;
        overflow: -moz-scrollbars-none;
        scrollbar-width: none;
    }


    .container::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }

Надеюсь, вы найдете это полезным :*

Просто установите ширину ширины дочернего элемента на 100%, отступы до 15 пикселей, переполнение-x для прокрутки и переполнения: скрытые для родителя и любой желаемой ширины, он отлично работает во всех основных браузерах, включая IE Edge с исключением IE8 и ниже.

У меня была эта проблема. Супер просто исправить. получите два контейнера. Внутренний будет вашим прокручиваемым контейнером, а внешний, очевидно, будет содержать внутреннее:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

Супер простой и должен работать с любым браузером. Удачи!

Не уверен, что я слишком поздно для вечеринки, но добавив

    overflow: -moz-scrollbars-none;

работал у меня