Скрыть полосу прокрутки, но при этом иметь возможность прокручивать

легко в 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; as на MSDN.

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

вот еще один способ, который еще не был упомянут. Это очень просто и включает только два divs и 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, где Скрул идет.

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. Не уверен в других браузерах.

добавление дополнения к внутреннему 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 + ')';

вот как я это делаю для горизонтальной прокрутки, только 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>

perfect-scrollbar плагин, кажется, путь, чтобы пойти, см.:https://github.com/noraesae/perfect-scrollbar

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

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

в современных браузерах, вы можете использовать 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;
});

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

на box-sizing value impact padding или margin solutions, они работают с box-sizing: content-box.

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

Это решение работает для содержимого тела html со стилем "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;
}

это будет на теле:

<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;
}

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

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

<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. Поэтому я решил скрыть полосу прокрутки, введя 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*/
}

другого рода подход суховато делать 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 это блог. Это может сработать для вас, но это определенно не элегантное решение.

еще одна простая работа скрипка.

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

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

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

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

    overflow: -moz-scrollbars-none;

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

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

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

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

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