Ukryj pasek przewijania, ale nadal możesz przewijać

Łatwy w Webkit, z opcjonalną stylizacją:

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

To działa dla mnie:

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

Uwaga: W najnowszych wersjach Firefoksa Właściwość -moz-scrollbars-none jest przestarzała (link ).

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

Jest to sztuczka polegająca na nakładaniu się paska przewijania z nakładającym się div, który nie ma żadnych pasków przewijania

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

Jest to tylko dla przeglądarek webkit.. lub możesz użyć css specyficznego dla przeglądarki (jeśli w przyszłości będzie) każda przeglądarka może mieć inną i specyficzną właściwość dla odpowiednich pasków

--EDIT--

Dla Microsoft Edge użyj: -ms-overflow-style: -ms-autohiding-scrollbar; lub -ms-overflow-style: none; jako dla MSDN.

Nie ma odpowiednika dla FF Chociaż jest JQuery plugin, aby to osiągnąć http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Oto inny sposób, o którym jeszcze nie wspomniano. Jest to naprawdę proste i obejmuje tylko dwa divs i CSS. Nie jest potrzebny JavaScript ani własny CSS i działa we wszystkich przeglądarkach. Nie wymaga wyraźnego ustawiania szerokości pojemnika, dzięki czemu jest płynny.

Ta metoda wykorzystuje ujemny margines, aby przesunąć pasek przewijania poza rodzica, a następnie taką samą ilość padding, aby przesunąć zawartość z powrotem do pierwotnej pozycji. Technika działa w pionie, przewijanie poziome i dwukierunkowe.

Dema:

• pionowe
• poziome
• obie strony

Przykładowy kod dla wersji pionowej:

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

Ta odpowiedź nie zawiera kodu, więc oto rozwiązanie ze strony :

Zgodnie ze stroną to podejście nie musi znać szerokości paska przewijania z wyprzedzeniem, aby działać, a rozwiązanie działa również we wszystkich przeglądarkach i można je zobaczyć tutaj.

Dobrą rzeczą jest to, że nie jesteś zmuszony do używania wypełnienia lub różnic szerokości, aby ukryć pasek przewijania.

Jest to również zoom Bezpieczny. Rozwiązania Padding / width pokazują pasek przewijania, gdy powiększony do minimum.

FF fix: 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>

Po prostu użyj następujących 3 linii, a twój problem zostanie rozwiązany:

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

Gdzie liaddshape jest nazwą div gdzie scrool nadchodzi.

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

Zastosuj CSS odpowiednio.

Sprawdź to tutaj (testowane w IE i 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
}

Wywołaj te funkcje, dla dowolnego punktu, w którym chcesz załadować lub rozładować lub przeładować paski przewijania. Nadal można przewijać w Chrome, ponieważ testowałem go w Chrome. Nie jestem pewien innych przeglądarek.

Dodanie wypełnienia do wewnętrznego div, jak w aktualnie akceptowanej odpowiedzi, nie zadziała, jeśli z jakiegoś powodu chcesz użyć box-model: border-box.

To, co działa w obu przypadkach, to zwiększenie szerokości wewnętrznej div do 100% plus Szerokość paska przewijania (zakładając overflow: hidden na zewnętrznym div).

Na przykład w CSS:

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

W Javascript, cross-browser:

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

Tak to robię dla przewijania poziomego, tylko CSS i działa dobrze z frameworkami takimi jak bootstrap / col-*. Potrzebuje tylko 2 dodatkowych div I rodzica z ustawioną szerokością lub max-szerokością:

Możesz wybrać tekst, aby go przewijać lub przewijać palcami, jeśli masz ekran dotykowy.

.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>

Krótka wersja dla leniwych:

.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 plugin wydaje się być drogą, zobacz: https://github.com/noraesae/perfect-scrollbar

Jest to dobrze udokumentowane i kompletne rozwiązanie oparte na JS dla problemu scrollbars.

Strona Demo: http://noraesae.github.io/perfect-scrollbar/

W nowoczesnych przeglądarkach można używać 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;
});

Mój problem : nie chcę żadnego stylu w moim html, chcę bezpośrednio moje ciało przewijania bez żadnego scrollbar, i tylko pionowe przewijanie, praca z css-siatki dla dowolnego rozmiaru ekranu.

The box-sizing value impact padding lub margin solutions, działają z box-sizing:content-box .

Nadal potrzebuję dyrektywy "- moz-scrollbars-none " i podobnie jak gdoron i Mr_Green, musiałem ukryć pasek przewijania. Próbowałem-moz-transform i-moz-padding-start, tylko do uderzenia firefox, ale nie było reagujących efektów ubocznych, które wymagały wiele pracy.

To rozwiązanie działa dla zawartości HTML w stylu "display: grid" i jest responsywne.

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

To będzie na ciele:

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

I to jest css:

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

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

Jest to rozwiązanie typu divitis, które powinno działać we wszystkich przeglądarkach...

Znacznik jest następujący I musi być wewnątrz czegoś o względnym pozycjonowaniu (i jego szerokość powinna być ustawiona, na przykład 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;
}

Zdarza mi się wypróbować powyższe rozwiązania w moim projekcie i z jakiegoś powodu nie byłem w stanie ukryć paska przewijania z powodu pozycjonowania div. Dlatego postanowiłem ukryć pasek przewijania, wprowadzając div, który pokrywa go powierzchownie. Poniższy przykład dotyczy poziomego paska przewijania:

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

Odpowiadający CSS jest następujący:

#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*/
}

Innym rodzajem hakerskiego podejścia jest wykonanie overflow-y: hidden, a następnie ręczne przewinięcie elementu za pomocą czegoś takiego:

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

Kolejna prosta praca .

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

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

Przepełnienie Ukryte na kontenerze nadrzędnym i przepełnienie automatyczne na kontenerze podrzędnym. Proste.

Nie wiem czy za późno na imprezę ale dodaję

    overflow: -moz-scrollbars-none;

Pracował dla mnie

Po prostu ustaw szerokość szerokości dziecka na 100%, padding na 15px, overflow-x do przewijania i przepełnienia: Ukryty dla rodzica i dowolnej szerokości, działa doskonale na wszystkich głównych przeglądarkach, w tym IE Edge z wyjątkiem IE8 i niższych.

Miałem taki problem. Bardzo proste do naprawienia. weź dwa pojemniki. Wewnętrzny będzie twoim przewijalnym pojemnikiem, a zewnętrzny oczywiście pomieści wewnętrzny: {]}

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

Super prosty i powinien działać z każdą przeglądarką. Powodzenia!