Ze względu na kompletność, działa to dla webkit:

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

Jeśli chcesz, aby wszystkie paski przewijania były ukryte, użyj

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

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

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

Możesz oczywiście zawsze używać width: 0, które można łatwo przywrócić za pomocą width: auto, ale nie jestem fanem nadużywania width Dla Poprawek widoczności.

Aby sprawdzić, czy Twoja obecna przeglądarka to obsługuje, spróbuj tego fragment:

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

  border: 1px dashed gray;
  padding: .5em;
  
  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content::-webkit-scrollbar { 
  /* This is the magic bit */
  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>

(zauważ, że nie jest to tak naprawdę poprawna odpowiedź na pytanie, ponieważ ukrywa również poziome paski, ale tego szukałem, gdy Google wskazał mi tutaj, więc pomyślałem, że i tak go opublikuję.)

Tak jakby..

Kiedy zadasz pytanie, "czy paski przewijania przeglądarki można usunąć w jakiś sposób, a nie po prostu ukryć lub zakamuflować", wszyscy powiedzą "niemożliwe", ponieważ nie jest możliwe usunięcie pasków przewijania ze wszystkich przeglądarek w sposób zgodny i Zgodny ze sobą, a następnie jest cały argument użyteczności.

Można jednak zapobiec konieczności generowania i wyświetlania pasków przewijania przez przeglądarkę, jeśli nie pozwól, aby Twoja strona internetowa przepełniła się.

Oznacza to po prostu, że musimy aktywnie zastąpić to samo zachowanie, które przeglądarka zwykle robi dla nas i powiedzieć przeglądarce dziękuję, ale nie dziękuję kolego. Zamiast próbować usunąć paski przewijania (co wszyscy wiemy, że nie jest możliwe) możemy uniknąć przewijania (doskonale wykonalne) i przewijania w elementach, które tworzymy i mieć większą kontrolę nad.

Utwórz div z ukrytym przepełnieniem. Wykrywanie, gdy użytkownik próbuje przewijać ale nie jest w stanie, ponieważ wyłączyliśmy możliwość przewijania przeglądarek za pomocą overflow: hidden.. 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 przeglądarek lub używamy wtyczki takiej jak iScroll

---

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

Internet Explorer 5.5+

*te właściwości nigdy nie były częścią spec CSS, ani nigdy nie zostały zatwierdzone lub prefiks dostawcy, ale działają w Internet Explorer i Konqueror. Można je również ustawić lokalnie w arkuszu stylów użytkownika dla każdej aplikacji. W IE znajdziesz go w zakładce "DOSTĘPNOŚĆ", w Konquerorze w zakładce" arkusze stylów".

body, html { /* these are default, can be replaced by hex 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;
}

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

IE udostępnia {[5] } który ustawia, czy wyłączyć lub włączyć paski przewijania; może być również używany do uzyskania wartości pozycji pasków przewijania.

Z Microsoft Internet Explorer 6 i nowszymi, gdy korzystasz zDeklaracja DOCTYPE aby określić tryb zgodny ze standardami, atrybut ten stosuje się do elementu HTML. Gdy tryb zgodny ze standardami nie jest określony, tak jak we wcześniejszych wersjach IE, atrybut ten dotyczy elementu BODY, Nie elementu HTML.

To także warto zauważyć, że podczas pracy z. NET Klasa ScrollBar w System.Windows.Controls.Primitives W ramach prezentacji jest odpowiedzialna za renderowanie pasków przewijania.

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

• MSDN. Podstawowe właściwości UI
• W3C. o niestandardowych właściwościach paska przewijania
• MSDN. Klasa. NET ScrollBar

Webkit

Rozszerzenia Webkit związane z możliwość dostosowania 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 */

Można je łączyć z dodatkowymi pseudo-selektorami:

• {[9] – - pseudoklasa pozioma dotyczy wszystkich elementów paska przewijania, które mają orientację poziomą.
• :vertical – pseudoklasa pionowa ma zastosowanie do dowolnych elementów paska przewijania, które mają orientację pionową.
• :decrement – pseudoklasa decrement ma zastosowanie do przycisków i utworów. Wskazuje czy przycisk lub kawałek ścieżki 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 elementów ścieżki. Wskazuje, czy przycisk lub kawałek ścieżki zwiększy pozycję widoku, gdy zostanie użyty (np. w dół na pionowym pasku przewijania, w prawo na poziomym pasku przewijania).
• :start - pseudo-Klasa startowa dotyczy przycisków i elementów ścieżki. Wskazuje, czy obiekt jest umieszczony przed kciukiem.
• :end - pseudoklasa końca ma zastosowanie do przycisków i utworów. Wskazuje, czy obiekt jest umieszczony za kciukiem.
• :double-button – pseudoklasa podwójnego przycisku dotyczy przycisków i elementów ścieżki. Jest on używany 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 zawiera parę przycisków.
• :single-button - Pojedynczy przycisk pseudo-Klasa dotyczy przycisków i elementów ścieżki. Służy do wykrywania, czy przycisk znajduje się sam na końcu paska przewijania. W przypadku utworów wskazuje, czy utwór zawiera przycisk singleton.
• :no-button - stosuje się do elementów toru i wskazuje, czy Element toru biegnie do krawędzi paska przewijania, tzn. nie ma przycisku na tym końcu toru.
• {–18]} - dotyczy wszystkich elementów paska przewijania i wskazuje, czy narożnik paska przewijania jest obecny.
• {[19] – - dotyczy wszystkich elementów paska przewijania i wskazuje, czy okno zawierające pasek przewijania jest aktualnie aktywne. (W ostatnich nocnych, ta pseudo-Klasa odnosi się teraz również do ::selection. Planujemy rozszerzyć ją o pracę z dowolną treścią i zaproponować ją jako nową standardową pseudo-klasę.)

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

• Style Scrollbars - Webkit.org

Dalsze informacje o Chrome

AddWindowScrollHandler
public static HandlerRegistration addWindowScrollHandler (Window.Scrollhandler handler)

Dodaje okno.ScrollEvent handler
Parametry:
  handler-the handler
Zwraca:
  zwraca rejestrację obsługi
[source](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 powinny być używane.

• -moz-scrollbars-none zalecają użycie overflow: hidden in place of this.
• -moz-scrollbars-horizontal podobne do overflow-x
• -moz-scrollbars-vertical Podobne do overflow-y

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

• Mozilla Developer Docs on "Overflow'

Dalsze informacje o Mozilli

Z tego co wiem nie jest to użyteczne, ale warto zauważyć, że atrybut, który kontroluje, czy paski przewijania są wyświetlane w Firefox to: (reference link)

• atrybut: scrollbars
• Typ: nsIDOMBarProp
• opis: obiekt, który kontroluje, czy paski przewijania są wyświetlane w oknie. Ten atrybut jest "wymienny" w JavaScript. Tylko do odczytu

Ostatni, ale nie mniej ważny, padding jest jak magia.

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

Lekcja historii

Tylko dlatego, że jestem ciekawy, chciałem dowiedzieć się o pochodzeniu scrollbarów i to są najlepsze odniesienia, jakie znalazłem.

• 10 wynalazki na przewijanie i Scrollbars
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Różne

W szkicu specyfikacji HTML5 atrybut seamless został zdefiniowany, aby zapobiec pojawianiu się pasków przewijania w ramkach iframe, aby mogły być mieszane z otaczającą treścią na stronie. choć ten element nie pojawia się w najnowszych rewizja.

Obiekt scrollbar BarProp jest potomkiem obiektu window i reprezentuje element interfejsu użytkownika, który zawiera mechanizm przewijania lub podobną koncepcję interfejsu. window.scrollbars.visible zwróci true jeśli paski przewijania są 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 podczas nawigacji po stronie, aby utrzymać pozycję przewijania podczas ładowania strony. window.history.scrollRestoration może być użyty do sprawdzenia stanu przewijania lub zmiany jego statusu (dołączanie ="auto"/"manual". Auto jest wartością domyślną. Zmiana go na ręczny oznacza, że jako deweloper przejmiesz odpowiedzialność za wszelkie zmiany przewijania, które mogą być wymagane, gdy użytkownik przemierza historię aplikacji. Jeśli potrzebujesz, możesz śledzić pozycję przewijania podczas przesuwania wpisów historii za pomocą historii.pushState ().

---

Czytaj dalej:

• Scrollbar na Wikipedii
• Scroll bar (Windows)
• The Scroll Metoda
• Metoda Przewijania-Microsoft Dev Network
• iScroll na Githubie (o którym mowa w pierwszej sekcji powyżej)
• Scrolling and Scrollbars artykuł o usability autorstwa Jakoba Nielsena

Przykłady

• niezależne panele przewijania bez przewijania ciała ( przy użyciu tylko CSS) - Ben Frain (10-21-2014)

Możesz to osiągnąć za pomocą wrappera div, który ma ukryte przepełnienie i wewnętrzny div ustawiony na auto.

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

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

Możesz użyć właściwości CSS overflow i -ms-overflow-style z kombinacją z ::-webkit-scrollbar.

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

Jest to znacznie lepsze rozwiązanie niż inne, gdy ukrywasz pasek przewijania za pomocą padding-right, ponieważ domyślna Szerokość paska przewijania jest inna w każdej przeglądarce.

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

Chyba znalazłem coś dla was, jeśli nadal jesteście zainteresowani. To mój pierwszy tydzień, ale mi się udało..

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

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

Jeśli szukasz rozwiązania, aby ukryć scrollbar dla urządzeń mobilnych, wykonaj Peter ' s answer!

Oto jsfiddle , który używa poniższego rozwiązania do ukrycia poziomego paska przewijania.

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

Jak już powiedzieli inni, użyj CSS overflow.

Ale jeśli nadal chcesz, aby użytkownik mógł przewijać tę zawartość (bez widocznego paska przewijania), musisz użyć JavaScript. Se moja odpowiedź tutaj na rozwiązanie: Ukryj scrollbar, a jednocześnie możesz przewijać za pomocą myszy/klawiatury

Użycie właściwość CSS overflow:

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

Oto kilka przykładów:

• http://www.brunildo.org/test/Overflowxy2.html
• http://css-tricks.com/the-css-overflow-property/

Podejście Cross Browser do ukrywania paska przewijania.

Tested Edge, Chrome, Firefox, Safari

Ukryj pasek przewijania, wciąż będąc w stanie przewijać za pomocą kółka 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;
}

Oprócz odpowiedzi Piotra:

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

To będzie działać tak samo dla IE10:

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

Jeśli chcesz przewijać do pracy, przed ukryciem pasków przewijania rozważ stylowanie oni. Nowoczesne wersje OS X i mobile OS mają scrollbars, że podczas niepraktyczne do chwytania za pomocą myszy, są dość piękne i neutralne.

Aby ukryć paski przewijania, technika autorstwa Johna Kurlaka działa dobrze oprócz pozostawienia Użytkowników Firefoksa, którzy nie mają touchpadów bez możliwości przewijania, chyba że mieć mysz z kółkiem, co pewnie robią, ale nawet wtedy mogą zazwyczaj tylko przewijanie pionowo.

Technika Jana wykorzystuje trzy elementy:

• zewnętrzny element maskujący paski przewijania.
• środkowy element z paskami przewijania.
• oraz element zawartości, aby zarówno ustawić rozmiar środkowego elementu, jak i uczynić ma paski przewijania.

Musi być możliwe ustawienie rozmiaru elementów zewnętrznych i zawartości tak samo co eliminuje używanie procentów, ale nie mogę myśleć o niczym innym, co nie będzie działać z prawej Podkręcanie.

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

Pardon my 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 Scrollbars Ukryte. Klawisze strzałek nie przewijają się, nawet po kliknięciu, aby ustawić ostrość, ale kółko myszy i dwa palce na gładziku tak. OS X i Windows.
• Chrome 37.0 Scrollbars Ukryte. Klawisze strzałek działają po kliknięciu, aby skupić się. Koło myszy i działa gładzik. OS X i Windows.
• Internet Explorer 11 Scrollbars Ukryte. Klawisze strzałek działają po kliknięciu, aby skupić się. Koło myszy działa. Okna.
• Safari 5.1.10 Scrollbars Ukryte. Klawisze strzałek działają po kliknięciu, aby skupić się. Koło myszy i działa gładzik. OS X.
• Android 4.4.4 i 4.1.2. Scrollbars Ukryte. Przewijanie dotykowe działa. Wypróbowany w Chrome 37.0, Firefox 32.0, a HTMLViewer na 4.4.4 (cokolwiek to jest). W HTMLViewer, strona czy rozmiar zamaskowanej treści i może być przewijany zbyt! Przewijanie współdziała poprawnie z powiększaniem strony.

Po prostu pomyślałem, że zwrócę uwagę każdemu, kto czyta to pytanie, że ustawienie overflow: hidden (lub overflow-y) na elemencie body nie ukryło dla mnie pasków przewijania. Musiałem użyć elementu HTML.

Mój html jest taki

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

Dodaj to do swojego div gdzie 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 pojemnika

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

Napisałem wersję webkit z opcjami takimi jak auto hide, mała wersja , scroll only-y lub only-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

Moja odpowiedź będzie przewijać nawet gdy overflow:hidden; używając jquery

Na przykład przewijanie poziomo 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żna nim manipulować za pomocą atrybutu overflow CSS, ale mają ograniczone wsparcie dla przeglądarki. Jedno źródło powiedziało, że to IE5+, Firefox 1.5 + i Safari 3+ - może wystarczy do Twoich celów.

Ten link ma dobrą dyskusję: http://www.search-this.com/2008/03/26/scrolling-scrolling-scrolling/

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

Znajdź więcej o :overflow