Czy można użyć CSS do ukrycia paska przewijania? Jak byś to zrobił?

Ustaw overflow: hidden;na znaczniku body w ten sposób:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

Powyższy kod ukrywa zarówno poziomy, jak i pionowy pasek przewijania.

Jeśli chcesz ukryć tylko pionowy pasek przewijania , użyj overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

A jeśli chcesz ukryć tylko poziomy pasek przewijania , użyj overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Uwaga: spowoduje to również wyłączenie funkcji przewijania. Zapoznaj się z poniższymi odpowiedziami, jeśli chcesz ukryć pasek przewijania, ale nie funkcję przewijania.

WebKit obsługuje pseudo elementy paska przewijania, które można ukryć za pomocą standardowych reguł CSS:

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

Jeśli chcesz ukryć wszystkie paski przewijania, użyj

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

Nie jestem pewien co do przywracania - to zadziałało, ale może być właściwy sposób:

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

Oczywiście możesz zawsze używać width: 0, dzięki czemu można go łatwo przywrócić width: auto, ale nie jestem fanem nadużywania widthpoprawek widoczności.

Firefox 64 obsługuje teraz domyślnie eksperymentalną właściwość szerokości paska przewijania (63 wymaga ustawienia flagi konfiguracji). Aby ukryć pasek przewijania w przeglądarce Firefox 64:

#element {
    scrollbar-width: none;
}

Aby sprawdzić, czy bieżąca przeglądarka obsługuje pseudo element lub scrollbar-widthwypróbuj ten fragment:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}

<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Pamiętaj, że to nie jest prawidłowa odpowiedź na pytanie, ponieważ ukrywa również poziome paski, ale tego właśnie szukałem, gdy Google wskazał mi tutaj, więc pomyślałem, że mimo to opublikuję).

Tak, jakby ...

Kiedy zadajesz pytanie: „Czy paski przewijania przeglądarki można usunąć w jakiś sposób, zamiast po prostu ukryć lub zakamuflować”, wszyscy powiedzą „Niemożliwe”, ponieważ nie można usunąć pasków przewijania ze wszystkich przeglądarek w zgodny i krzyżowy sposób, a następnie cały argument użyteczności.

Można jednak uniemożliwić przeglądarce generowanie i wyświetlanie pasków przewijania, jeśli nie dopuścisz do przepełnienia strony.

Oznacza to po prostu, że musimy proaktywnie zastąpić to samo zachowanie, które zwykle zrobiłaby dla nas przeglądarka, i przekazać przeglądarce podziękowania, ale nie, dziękuję kolego. Zamiast próbować usuwać paski przewijania (o których wszyscy wiemy, że nie jest to możliwe), możemy uniknąć przewijania (całkowicie wykonalne) i przewijania elementów, które tworzymy i mamy większą kontrolę.

Utwórz div z ukrytym przepełnieniem. Wykryj, kiedy użytkownik próbuje przewijać, ale nie jest w stanie tego zrobić, ponieważ wyłączyliśmy możliwość przewijania przeglądarki z przepełnieniem: ukryty .. i zamiast tego przenieś zawartość w górę za pomocą JavaScript, gdy to nastąpi. W ten sposób tworzymy własne przewijanie bez domyślnego przewijania w przeglądarce lub użyj wtyczki takiej jak iScroll .

---

Ze względu na dokładność; wszystkie specyficzne dla dostawcy sposoby manipulacji paskami przewijania:

Internet Explorer 5.5+

* Te właściwości nigdy nie były częścią specyfikacji CSS, ani nie zostały nigdy zatwierdzone ani prefiksowane przez producenta, ale działają w Internet Explorerze i Konquerorze. Można je również ustawić lokalnie w arkuszu stylów użytkownika dla każdej aplikacji. W Internet Explorerze znajdziesz go pod zakładką „Dostępność”, w Konquerorze pod zakładką „Arkusze stylów”.

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Począwszy od Internet Explorera 8, właściwości te były prefiksowane przez producenta przez Microsoft, ale nadal nie zostały zatwierdzone przez W3C .

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Więcej informacji o programie Internet Explorer

Internet Explorer scrolludostępnia, który ustawia, czy wyłączyć, czy włączyć paski przewijania; Można go również użyć do uzyskania wartości położenia pasków przewijania.

W programie Microsoft Internet Explorer 6 i nowszych, gdy !DOCTYPEdeklaracja służy do określania trybu zgodnego ze standardami, ten atrybut dotyczy elementu HTML. Gdy tryb zgodnych ze standardami nie jest określony, jak we wcześniejszych wersjach programu Internet Explorer, atrybut ten odnosi się do BODYelementu, NOTHTML elementu.

Warto również zauważyć, że podczas pracy z platformą .NET klasa ScrollBar System.Windows.Controls.Primitivesw strukturze prezentacji odpowiada za renderowanie pasków przewijania.

http://msdn.microsoft.com/en-us/library/ie/ms534393(v=vs.85).aspx

• MSDN. Podstawowe właściwości interfejsu użytkownika
• W3C. Informacje o niestandardowych właściwościach paska przewijania
• MSDN. Klasa .NET ScrollBar

WebKit

Rozszerzenia WebKit związane z dostosowaniem paska przewijania to:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Każdy z nich można połączyć z dodatkowymi pseudo-selektorami:

• :horizontal - Pseudoklasa pozioma dotyczy wszystkich elementów paska przewijania, które mają orientację poziomą.
• :vertical - Pionowa pseudoklasa dotyczy wszystkich elementów paska przewijania, które mają orientację pionową.
• :decrement- Pseudoklasa dekrementacji dotyczy przycisków i utworów. Wskazuje, czy przycisk lub utwór zmniejszy pozycję widoku, gdy zostanie użyty (np. W górę na pionowym pasku przewijania, w lewo na poziomym pasku przewijania).
• :increment- Pseudoklasa przyrostowa dotyczy przycisków i utworów. Wskazuje, czy przycisk lub utwór zwiększy pozycję widoku, gdy zostanie użyty (np. W dół na pionowym pasku przewijania, bezpośrednio na poziomym pasku przewijania).
• :start- Pseudoklasa początkowa dotyczy przycisków i utworów. Wskazuje, czy obiekt jest umieszczony przed kciukiem.
• :end- Pseudoklasa końcowa dotyczy przycisków i utworów. Wskazuje, czy obiekt jest umieszczony za kciukiem.
• :double-button- Pseudoklasa z dwoma przyciskami dotyczy przycisków i utworów. Służy do wykrywania, czy przycisk jest częścią pary przycisków, które są razem na tym samym końcu paska przewijania. W przypadku utworów wskazuje, czy utwór opiera się o parę przycisków.
• :single-button- Pseudoklasa jednoprzyciskowa dotyczy przycisków i utworów. Służy do wykrywania, czy przycisk jest sam na końcu paska przewijania. W przypadku kawałków utworu wskazuje, czy utwór opiera się o przycisk singletonu.
• :no-button - Stosuje się do utworów i wskazuje, czy utwór biegnie do krawędzi paska przewijania, tj. Nie ma przycisku na tym końcu utworu.
• :corner-present - Dotyczy wszystkich elementów paska przewijania i wskazuje, czy jest obecny narożnik paska przewijania.
• :window-inactive- Dotyczy wszystkich elementów paska przewijania i wskazuje, czy okno zawierające pasek przewijania jest obecnie aktywne. (W ostatnich klubach nocnych ta pseudoklasa dotyczy teraz również :: selection. Planujemy rozszerzyć ją do pracy z dowolną zawartością i zaproponować jako nową standardową pseudoklasę.)

Przykłady tych kombinacji

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

• Stylowe paski przewijania - Webkit.org

Więcej informacji o Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (moduł obsługi Window.ScrollHandler)

  Dodaje moduł obsługi Window.ScrollEvent Parametry: moduł obsługi - moduł obsługi Zwraca: zwraca rejestrację modułu obsługi [ źródło ] ( http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/Window.html# addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )

Mozilla

Mozilla ma pewne rozszerzenia do manipulowania paskami przewijania, ale wszystkie nie zaleca się używania.

• -moz-scrollbars-none Zalecają użycie przelewu: ukrytego w miejscu tego.
• -moz-scrollbars-horizontal Podobne do przelewu-x
• -moz-scrollbars-vertical Podobne do przelewu-y

• -moz-hidden-unscrollableDziała tylko wewnętrznie w ramach ustawień profilu użytkownika. Wyłącza przewijanie elementów głównych XML i wyłącza za pomocą klawiszy strzałek i kółka myszy do przewijania stron internetowych.

• Dokumenty deweloperów Mozilli na temat „Przepełnienia”

Więcej informacji o Mozilli

O ile wiem, nie jest to naprawdę przydatne, ale warto zauważyć, że atrybut, który kontroluje, czy paski przewijania są wyświetlane w przeglądarce Firefox, jest ( odnośnik ):

• Atrybut:        paski przewijania
• Wpisz:               nsIDOMBarProp
• Opis:   Obiekt kontrolujący, czy paski przewijania są wyświetlane w oknie. Ten atrybut jest „wymienny” w JavaScript. Tylko czytać

Wreszcie, wyściółka jest jak magia.

Jak wspomniano wcześniej w niektórych innych odpowiedziach, oto ilustracja, która jest wystarczająco oczywista.

Lekcja historii

Właśnie dlatego, że jestem ciekawy, chciałem dowiedzieć się o pochodzeniu pasków przewijania i to są najlepsze referencje, jakie znalazłem.

• 10 wynalazków dotyczących przewijania i pasków przewijania
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Różne

W wersji roboczej specyfikacji HTML5 seamlessatrybut został zdefiniowany, aby zapobiec pojawianiu się pasków przewijania w ramkach iFrame, aby można je było łączyć z otaczającą zawartością strony . Chociaż ten element nie pojawia się w najnowszej wersji.

Obiekt scrollbarBarProp jest obiektem potomnym windowobiektu i reprezentuje element interfejsu użytkownika zawierający mechanizm przewijania lub podobną koncepcję interfejsu. window.scrollbars.visiblepowróci, truejeśli paski przewijania będą widoczne.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

History API zawiera również funkcje przywracania przewijania w nawigacji strony, aby zachować pozycję przewijania podczas ładowania strony.

window.history.scrollRestorationmoże służyć do sprawdzania stanu przywracania lub zmiany jego statusu (dołączanie ="auto"/"manual". Domyślną wartością jest Auto. Zmiana na ręczną oznacza, że ​​jako programista przejmiesz na własność wszelkie zmiany przewijania, które mogą być wymagane, gdy użytkownik przejdzie historię aplikacji W razie potrzeby możesz śledzić pozycję przewijania, przesuwając wpisy historii za pomocą history.pushState ().

---

Dalsza lektura:

• Pasek przewijania w Wikipedii
• Pasek przewijania (Windows)
• Metoda przewijania
• Metoda przewijania - Microsoft Dev Network
• iScroll na Github (wymieniony w pierwszej części powyżej)
• Przewijanie i paski przewijania artykuł o użyteczności autorstwa Jakoba Nielsena

Przykłady

• Niezależne przewijane panele bez przewijania ciała (tylko CSS) - Ben Frain (10-21-2014)

Możesz to zrobić za pomocą opakowania, divktóre ma ukryty przelew i divzestaw wewnętrzny ustawiony na auto.

Aby usunąć divpasek przewijania wewnętrznego , możesz wyciągnąć go z okna zewnętrznego div, stosując margines ujemny do wewnętrznego div. Następnie zastosuj równe wypełnienie wewnętrznego div, aby zawartość pozostała widoczna.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}

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;

Oto moje rozwiązanie, które teoretycznie obejmuje wszystkie nowoczesne przeglądarki:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html można zastąpić dowolnym elementem, którego chcesz ukryć pasek przewijania.

_{Uwaga : przejrzałem pozostałe 19 odpowiedzi, aby sprawdzić, czy kod, który publikuję, został już uwzględniony i wydaje się, że żadna pojedyncza odpowiedź nie podsumowuje sytuacji w 2019 r., Chociaż wiele z nich jest dopracowanych w szczegółach. Przepraszam, jeśli ktoś powiedział to, a ja tego nie zauważyłem.}

Myślę, że znalazłem obejście dla was, jeśli nadal jesteście zainteresowani. To mój pierwszy tydzień, ale zadziałało dla mnie ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}

Jeśli szukasz rozwiązania, aby ukryć pasek przewijania dla urządzeń mobilnych, skorzystaj z odpowiedzi Petera !

Oto jsfiddle , który wykorzystuje poniższe rozwiązanie, aby ukryć poziomy pasek przewijania.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Został przetestowany na tablecie Samsung z Androidem 4.0.4 (Ice Cream Sandwich, zarówno w natywnej przeglądarce, jak i Chrome) oraz na iPadzie z iOS 6 (zarówno w Safari, jak i Chrome).

Użyj właściwości CSSoverflow :

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

Oto kilka innych przykładów:

• testy przelewu-x, przelewu-y
• Właściwość przepełnienia CSS

Jak już inni mówili, używaj CSS overflow.

Ale jeśli nadal chcesz, aby użytkownik mógł przewijać tę zawartość (bez widocznego paska przewijania), musisz użyć JavaScript.

Zobacz moją odpowiedź na rozwiązanie: Ukryj pasek przewijania, wciąż będąc w stanie przewijać za pomocą myszy / klawiatury

Oprócz odpowiedzi Piotra:

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

Będzie to działać tak samo dla Internet Explorera 10:

 #element {
      -ms-overflow-style: none;
 }

Podejście do ukrywania paska przewijania w różnych przeglądarkach.

Został przetestowany na Edge, Chrome, Firefox i Safari

Ukryj pasek przewijania, wciąż będąc w stanie przewijać kółkiem myszy!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}

Jeśli chcesz, aby przewijanie działało, przed ukryciem pasków przewijania rozważ ich stylizację. Nowoczesne wersje OS X i mobilnych systemów operacyjnych mają paski przewijania, które, choć niepraktyczne do chwytania za pomocą myszy, są dość piękne i neutralne.

Aby ukryć paski przewijania, technika Johna Kurlaka działa dobrze, z wyjątkiem pozostawienia użytkowników Firefoksa, którzy nie mają touchpadów, bez możliwości przewijania, chyba że mają mysz z kółkiem, co prawdopodobnie robią, ale nawet wtedy zwykle mogą przewijać tylko pionowo .

Technika Johna wykorzystuje trzy elementy:

• Element zewnętrzny do maskowania pasków przewijania.
• Środkowy element mający paski przewijania.
• I element treści, aby zarówno ustawić rozmiar środkowego elementu, jak i mieć paski przewijania.

Musi być możliwe ustawienie tego samego rozmiaru elementów zewnętrznych i zawartości, co eliminuje użycie wartości procentowych, ale nie mogę wymyślić niczego innego, co nie działałoby z odpowiednim poprawieniem.

Moim największym zmartwieniem jest to, czy wszystkie wersje przeglądarek ustawiają paski przewijania, aby widoczne były przepełnione treści. Testowałem w obecnych przeglądarkach, ale nie starszych.

Przepraszam za moje SASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // push scrollbars behind mask
    @extend %size;
}

Testowanie

OS X to 10.6.8. Windows to Windows 7.

• Firefox 32.0 Paski przewijania ukryte. Klawisze strzałek nie przewijają się, nawet po kliknięciu, aby ustawić ostrość, ale kółko myszy i dwa palce na gładziku działają. OS X i Windows.
• Chrome 37.0 Paski przewijania ukryte. Klawisze strzałek działają po kliknięciu, aby ustawić ostrość. Działa kółko myszy i gładzik. OS X i Windows.
• Ukryte paski przewijania programu Internet Explorer 11. Klawisze strzałek działają po kliknięciu, aby ustawić ostrość. Koło myszy działa. Windows
• Safari 5.1.10 Paski przewijania ukryte. Klawisze strzałek działają po kliknięciu, aby ustawić ostrość. Działa kółko myszy i gładzik. OS X.
• Android 4.4.4 i 4.1.2. Paski przewijania ukryte. Przewijanie dotykowe działa. Próbowałem w Chrome 37.0, Firefox 32.0 i HTMLViewer w 4.4.4 (cokolwiek to jest). W HTMLViewer strona ma rozmiar zamaskowanej zawartości i może być również przewijana! Przewijanie współdziała akceptowalnie z powiększaniem strony.

Pomyślałem, że wskazałbym każdemu, kto czytał to pytanie, że ustawienie overflow: hidden(lub przepełnienie y) bodyelementu nie ukrywało dla mnie pasków przewijania.

Musiałem użyć tego htmlelementu.

Napisałem wersję WebKit z niektórymi opcjami, takimi jak automatyczne ukrywanie , mała wersja , przewijaj tylko-y lub tylko-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

Skopiuj ten kod CSS do kodu klienta w celu ukrycia paska przewijania:

<style>

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

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

</style>

Mój HTML wygląda tak:

<div class="container">
  <div class="content">
  </div>
</div>

Dodaj to do divmiejsca, w którym chcesz ukryć pasek przewijania:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

I dodaj to do kontenera

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}

Aby wyłączyć pionowy pasek przewijania, wystarczy dodać overflow-y:hidden;.

Znajdź więcej na ten temat: przepełnienie .

Moja odpowiedź przewinie się nawet wtedy overflow:hidden;, gdy za pomocą jQuery:

Na przykład przewijaj w poziomie za pomocą kółka myszy:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>

Wierzę, że możesz manipulować nim za pomocą overflowatrybutu CSS, ale mają ograniczoną obsługę przeglądarki. Jedno ze źródeł podało, że był to Internet Explorer 5 (i nowszy), Firefox 1.5 (i nowszy) i Safari 3 (i nowszy) - być może wystarczające do Twoich celów.

Przewijanie, przewijanie, przewijanie ma dobrą dyskusję.

Próbowałem wszystkiego i najlepsze dla mojego rozwiązania było zawsze wyświetlanie pionowego paska przewijania, a następnie dodanie marginesu ujemnego, aby go ukryć.

body {
  overflow-y: scroll;
  margin-right: -20px;
}