Ukryj pasek przewijania, ale nadal można przewijać

Chcę móc przewijać całą stronę, ale bez pokazywania paska przewijania.

W Google Chrome jest to:

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

Ale Mozilla Firefox i Internet Explorer nie działają w ten sposób.

Próbowałem też tego w CSS:

overflow: hidden;

To ukrywa pasek przewijania, ale nie mogę już przewijać.

Czy istnieje sposób, aby usunąć pasek przewijania, wciąż przewijając całą stronę?

Poproszę tylko o CSS lub HTML.

Tylko test, który działa dobrze.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Ponieważ szerokość paska przewijania różni się w różnych przeglądarkach, lepiej jest obsługiwać go za pomocą JavaScript. Jeśli to zrobisz Element.offsetWidth - Element.clientWidth, zostanie wyświetlona dokładna szerokość paska przewijania.

JavaScript Working Fiddle

Lub

Za pomocą Position: absolute,

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

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Informacja:

Na podstawie tej odpowiedzi stworzyłem prostą wtyczkę przewijania .

Jest łatwy w WebKit, z opcjonalnym stylem:

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

Działa to dla mnie z prostymi właściwościami CSS:

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

W przypadku starszych wersji Firefoksa użyj: overflow: -moz-scrollbars-none;

AKTUALIZACJA:

Firefox obsługuje teraz ukrywanie pasków przewijania za pomocą CSS, więc wszystkie główne przeglądarki są teraz objęte (Chrome, Firefox, Internet Explorer, Safari itp.).

Po prostu zastosuj następujący CSS do elementu, z którego chcesz usunąć paski przewijania:

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

Jest to najmniej hackerskie rozwiązanie dla wielu przeglądarek, o którym obecnie wiem. Sprawdź wersję demo.

ORYGINALNA ODPOWIEDŹ:

Oto inny sposób, o którym jeszcze nie wspomniano. To jest naprawdę proste i wymaga tylko dwóch div i CSS. Nie jest potrzebny JavaScript ani zastrzeżony CSS i działa on we wszystkich przeglądarkach. Nie wymaga też jawnego ustawiania szerokości pojemnika, dzięki czemu jest płynny.

Ta metoda wykorzystuje ujemny margines, aby przesunąć pasek przewijania poza element nadrzędny, a następnie taką samą ilość dopełnienia, aby przesunąć zawartość z powrotem do pierwotnej pozycji. Ta technika działa w przypadku przewijania w pionie, poziomie i na dwa sposoby.

Dema:

• Pionowy
• Poziomy
• Oba kierunki

Przykładowy kod 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;
}

Posługiwać się:

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

Jest to sztuczka polegająca na nieco nałożeniu paska przewijania na nakładający się div, który nie ma żadnych pasków przewijania:

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

Dotyczy to tylko WebKit przeglądarek ... Lub możesz użyć zawartości CSS specyficznej dla przeglądarki (jeśli taka będzie w przyszłości). Każda przeglądarka może mieć inną i określoną właściwość dla odpowiednich pasków.

W przypadku Microsoft Edge użyj: -ms-overflow-style: -ms-autohiding-scrollbar;lub -ms-overflow-style: none;zgodnie z MSDN .

Nie ma odpowiednika dla Firefoksa. Chociaż istnieje do tego celu wtyczka jQuery, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

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

Według strony to podejście nie musi wcześniej znać szerokości paska przewijania, aby działać, a rozwiązanie działa również dla wszystkich przeglądarek i można je zobaczyć tutaj .

Dobrą rzeczą jest to, że nie musisz używać wypełnienia ani różnic szerokości, aby ukryć pasek przewijania.

Jest to również bezpieczne powiększanie. Rozwiązania wypełnienia / szerokości pokazują pasek przewijania po powiększeniu do minimum.

Poprawka Firefoksa: 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>

Wystarczy użyć następujących trzech wierszy, a problem zostanie rozwiązany:

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

Gdzie liaddshapes to nazwa div, gdzie nadchodzi zwój.

Działa to dla mnie w różnych przeglądarkach. Nie ukrywa to jednak natywnych pasków przewijania w przeglądarkach mobilnych.

W SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

W CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}

Poniższe działało dla mnie w Microsoft, Chrome i Mozilli dla określonego elementu div:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}

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ź tutaj (przetestowane w Internet Explorerze i Firefoxie).

Od 11 grudnia 2018 r. (Firefox 64 i nowsze wersje) odpowiedź na to pytanie jest bardzo prosta, ponieważ Firefox 64+ implementuje teraz specyfikację Stylizacji paska przewijania CSS .

Wystarczy użyć następującego CSS:

scrollbar-width: none;

Link do informacji o wersji przeglądarki Firefox 64 tutaj .

Posługiwać się:

CSS

#subparent {
    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);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>

Posługiwać się

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

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

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

To działa dla mnie:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

W nowoczesnych przeglądarkach możesz używać wheel event:

// Content is the element you want to apply the wheel scroll effect to
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 treści HTML. Chcę, aby moje ciało było bezpośrednio przewijalne bez paska przewijania i tylko pionowe przewijanie, współpracujące z siatkami CSS dla dowolnego rozmiaru ekranu.

Rozwiązania wyrównywania wartości marginesów w pudełku wpływają na rozwiązania w zakresie wielkości pudełka: content-box .

Nadal potrzebuję dyrektywy „-moz-scrollbars-none” i podobnie jak gdoron i Mr_Green musiałem ukryć pasek przewijania. Próbowałem -moz-transformi -moz-padding-start, aby wpłynąć tylko na Firefoksa, ale były responsywne efekty uboczne, które wymagały zbyt wiele pracy.

To rozwiązanie działa w przypadku treści HTML ze stylem „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;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  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;
}

Dodanie dopełnienia do wewnętrznej div, jak w obecnie akceptowanej odpowiedzi, nie będzie działać, jeśli z jakiegoś powodu chcesz użyć box-model: border-box.

W obu przypadkach działa zwiększenie szerokości wewnętrznej divdo 100% plus szerokość paska przewijania (przy założeniu, overflow: hiddenże div div).

Na przykład w CSS:

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

W JavaScript, w różnych przeglądarkach:

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

Tak właśnie robię dla przewijania w poziomie; tylko CSS i działa dobrze z frameworkami takimi jak Bootstrap / col- *. Potrzebuje tylko dwóch dodatkowych divs, a rodzic z widthlubmax-width set:

Możesz zaznaczyć tekst, aby go przewinąć lub przewinąć 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>

Zdarzyło mi się wypróbować powyższe rozwiązania w moim projekcie iz 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. Przykład poniżej dotyczy poziomego paska przewijania:

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

Odpowiedni CSS wygląda następująco:

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

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>

A 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 jednak powinno działać dla wszystkich przeglądarek ...

Znaczniki są następujące i muszą znajdować się wewnątrz czegoś o względnym ustawieniu (a jego szerokość powinna być ustawiona, na przykład 400 pikseli):

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

perfect-scrollbarWtyczki wydaje się być droga, patrz: https://github.com/noraesae/perfect-scrollbar

Jest to dobrze udokumentowane i kompletne rozwiązanie oparte na JavaScript do problemu pasków przewijania.

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

Poniższa stylizacja SASS powinna sprawić, że pasek przewijania będzie przezroczysty w większości przeglądarek (Firefox nie jest obsługiwany):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

Innym rodzajem hacków jest zrobienie, overflow-y: hiddena 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'
    });
  });
}

Na blogu deepmikoto znajduje się świetny artykuł o tym, jak wykrywać i radzić sobie z onmousewheelwydarzeniami . Może ci się to przydać, ale zdecydowanie nie jest to eleganckie rozwiązanie.

Chciałem tylko udostępnić połączony fragment kodu do ukrywania paska przewijania, którego używam podczas programowania. Jest to zbiór kilku fragmentów znalezionych w Internecie, który działa dla mnie:

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

Możesz użyć kodu poniżej, aby ukryć pasek przewijania, ale nadal możesz przewijać:

.element::-webkit-scrollbar { 
    width: 0 !important 
}

Aby ukryć paski przewijania dla elementów z przepełnioną zawartością, użyj.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    

Kolejne proste skrzypce robocze :

#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 w kontenerze nadrzędnym i automatyczne przepełnienie w kontenerze podrzędnym. Prosty.

To podchwytliwe rozwiązanie działa nawet w starej przeglądarce IE

Jest to obejście [ pionowego paska przewijania ]

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

Po prostu spróbuj: jsfiddle

Po prostu ustaw szerokość szerokości dziecka na 100%, dopełnianie na 15 pikseli, overflow-xaby przewijać i overflow:hiddendla rodzica i dowolną szerokość.

Działa doskonale we wszystkich głównych przeglądarkach, w tym Internet Explorer i Edge, z wyjątkiem Internet Explorera 8 i niższych.