Ukrywanie paska przewijania na stronie HTML

748

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

ANP
źródło
4
@UweKeim, nie ma żadnej sztuczki dla IE11
daVe

Odpowiedzi:

425

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.

jao
źródło
4
Nie ma opcji „none” dla właściwości przepełnienia. Dostępne opcje to: widoczny, ukryty, przewijany, automatyczny, dziedziczenie.
Sergiy Sokolenko
1273
W rzeczywistości nie jest to właściwa odpowiedź: przepełnienie: ukryte nie „ukrywa” paska przewijania. Zatrzymuje także funkcję przewijania na stronie. Nie o to dokładnie prosimy.
adriendenat
17
W Chrome, gdy przepełnienie ciała jest ustawione na hiddenprzewijanie, będzie działać z kółkiem myszy. W przeglądarce Firefox przewijanie nie działa z kółkiem myszy, zajęło mi to trochę czasu, aby to zrozumieć.
Doug Molineux,
13
Nie widzę sensu w twierdzeniu, że overflow: hiddenwyłącza przewijanie. Jeśli ktoś chce ukryć pasek przewijania, prawdopodobnie uważa sterowanie za niepotrzebne, ponieważ w ogóle nie ma treści do przewijania . A może po prostu nie chcą całkowicie przewijać .
BoltClock
39
Dla mnie stwierdzenie to jest całkowicie poprawne, ponieważ pytanie polega na ukryciu paska przewijania , a nie na wyłączeniu przewijania .
sboisse
976

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:


(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ę).

Piotr
źródło
11
Właśnie tego szukałem, ponieważ naprawdę chciałem ukryć paski przewijania, ale nadal przewijać elementy (np. Klawisze góra / dół)
Mathias
7
powinna to być najlepsza odpowiedź, ponieważ inne rozwiązania nie pozwalają na przewijanie
zawsze
7
Czy obsługuje to inne przeglądarki oprócz webkit? Ponieważ nie działa w Mozilli.
Rupam Datta
12
Jest jednak prośba o funkcję w narzędziu do śledzenia Mozilli. Możesz przyspieszyć wdrożenie, głosując na to tam :)
Peter
3
TO PRAWIDŁOWA ODPOWIEDŹ! Jak inni zaginęli. Problemem jest nie tylko ukrywanie paska przewijania, ale także wpływ przepełnienia na inne style. Natrafiłem na ten sam problem w naszej aplikacji. NIE chcemy, aby automatyczne przelewanie dotyczyło 99% aplikacji, jednak istnieje sekcja pomocy, w której użytkownik ma możliwość przewijania w dół. Ponieważ ciało ma przepełnienie: ukryte, jedyną waną, która sobie z tym poradziła, była klasa ng w katalogu głównym, lub dzięki tym facetom, tylko używając CSS.
Leon Gaban,
524

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


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

Wpisz opis zdjęcia tutaj

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

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.

Wpisz opis zdjęcia tutaj


Lekcja historii

Przewiń paski

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

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:

Przykłady

Davidcondrey
źródło
27
Ta odpowiedź miałaby zastosowanie do znacznie większej liczby przeglądarek (a mianowicie IE) niż do obecnie ocenianej odpowiedzi.
Matt Jensen,
Świetny dodatek. Właściwie już dziś wdrożyłem to samo rozwiązanie! Warto wspomnieć, że drugi element powinien być przepełniony: ukryty;
Matt Jensen,
2
To jest poprawna, w pełni funkcjonalna odpowiedź. Wyjaśniam, że jeśli po prostu chcesz zatrzymać przewijanie użytkownika, możesz użyć reguły przepełnienia. Możesz także wdrożyć własną funkcję przewijania wbudowaną w dom. Jeśli to nie wystarczy, możesz ustawić właściwości paska przewijania bezpośrednio przy użyciu różnych reguł dla różnych przeglądarek.
newshorts
1
jest to niezwykle przemyślana odpowiedź, bardzo szczegółowa i połączona z wieloma zasobami, ale dla użytkowników technologii asystujących istnieją ogromne problemy, gdy wyłączasz przewijanie i używasz javascript do obsługi całego przewijania. Jeśli nie ustawisz fokusu na elemencie za każdym razem, gdy przewijasz użytkownika, wówczas użytkownik AT zostanie całkowicie zagubiony. Ponadto twój użytkownik stracił teraz całą precyzyjną kontrolę nad tym, co widzi. Bardzo słaby UX do przejęcia przewijania dla twojego użytkownika.
ShiningLight,
Firefox Quantum 63.0.1 w systemie MacOS High Sierra nie ukrywa paska przewijania, nawet z regułą „przepełnienie: -moz-scrollbars-none”. Czy ktoś wie na to rozwiązanie? Wszystkie pozostałe przeglądarki wydają się działać z sugerowanymi rozwiązaniami.
Simona Adriani,
106

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;
}
thgaskell
źródło
8
To powinna być zaakceptowana odpowiedź imo. Jedyne, co musiałem dodać, to było height: inheritedw .viewportcss.
Helzgate
4
Jedynym problemem związanym z tą odpowiedzią jest „martwa” przestrzeń pozostawiona przez przesunięty pasek przewijania, ponieważ tak naprawdę nie znamy szerokości paska przewijania, aby odjąć go od wypełnienia.
Frondor
3
Ponadto nie trzeba używać stałych wartości wypełnienia i marginesów. 100%jest bardziej wszechstronny i spełnia swoje zadanie.
Frondor
Pracował w IE11, Operah i Chrome, nie testowałem jeszcze Firefoksa. To świetna odpowiedź, +1.
prawie początkujący
dlaczego -100pxi 100px??
oldboy
61

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;

Hristo Eftimov
źródło
2
Niestety nie działa to w FireFox 48.0.2 na macOS Sierra. Jeśli to zrobisz overflow: -moz-scrollbars-none;, z powodzeniem usuniesz pasek przewijania, ale również usuniesz możliwość przewijania. Równie dobrze możesz po prostu ustawić overflow: hiddenopcję .container.
Martyn Chamberlin,
1
Aha, i z developer.mozilla.org/en-US/docs/Web/CSS/overflow , czytamy o -moz-scrollbars-none: „To jest przestarzały interfejs API i nie ma już gwarancji, że będzie działał”.
Martyn Chamberlin,
1
Zaktualizowałem odpowiedź o najnowsze wsparcie dla przeglądarki Firefox :)
Hristo Eftimov
56

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.

Wilf
źródło
3
najbardziej niedoceniana odpowiedź tutaj
AGrush
Jedyne rozwiązanie, które naprawiło mój przewijany koszmar: D Dzięki!
boomdrak
21

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;}
Ben Yo
źródło
Działa dla mnie w chrome i firefox, nie testowałem IE ani żadnej innej przeglądarki. jsfiddle.net/8xtfk729
Ben Davis
1
W przypadku Chrome (co najmniej v54) powoduje to wyłączenie przewijania za pomocą kółka przewijania z jakiegoś powodu. Przewijaj za pomocą klawiszy strzałek, home / end / pg w dół / pg w górę, dotknij i przesuń myszką 3 kliknięcie i przeciąganie nadal działa.
House3272,
Ta odpowiedź jest prawidłowa, faktycznie działa i wydaje się działać w różnych przeglądarkach.
Sam
To ukrywa całą divę po mojej stronie
Jonny
16

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

Alex
źródło
jego odpowiedź nie działa w Chrome i Safari w iOS 12.3
oldboy
11

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

Peter Örneholm
źródło
1
To jest poprawna odpowiedź i powinna być pierwsza. Wszystko powyżej nie odpowiada na pytanie. OP nie prosi o wyłączenie przewijania wyłączone, zhe chce ukryć pasek przewijania.
pixelpax
11

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;
 }
JoshW
źródło
10

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;
}
Blake Plumb
źródło
1
wyjaśnienie, w jaki sposób to będzie docenione - granie z widocznością rodziców / dzieci w celu ukrycia paska przewijania jest okropne
JackyJohnson
1
@believesInSanta Dodałem komentarze i codepen, aby lepiej wyjaśnić. Nie zgadzam się z twoją oceną, że gra z widocznością to okropny sposób na ukrycie paska przewijania. Rozumiem, że jest to hack, ale właściwym sposobem na osiągnięcie tego efektu byłoby, gdyby wszystkie przeglądarki obsługiwały sposób stylizowania paska przewijania osobno, na przykład Chrome i Safari.
Blake Plumb,
2
Właśnie zakochałem się w twoim rozwiązaniu. Doskonale działa (stosowany w aplikacjach zaprojektowanych do użytku przez nowoczesne przeglądarki). Dziękuję bardzo!
Maxime Lafarie
7

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.
Seth W. Klein
źródło
1
Nota niepowiązana (o ile chodzi o pytanie). W tym przypadku powinieneś użyć @extend kontra @include. Zamiast tego @mixin{}zrobiłbyś %size{}to w selektorach css, zadzwoń @extend %size;. Mixiny są zwykle używane, gdy przyciągasz zmienne, aby zwrócić wynik. Symbole zastępcze (aka @extend) są przeznaczone do prostego, powtarzanego kodu, takiego jak ten - gdzie nie jest potrzebna „funkcja”.
Mike Barwick,
1
Zredagowałem, aby użyć @extend. Wynik jest prawdopodobnie mniej zrozumiały dla osób, które nie znają SCSS, ale wystarczająco dobrze.
Seth W. Klein
6

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.

Brad Azevedo
źródło
3
Nie pamiętam dokładnie, ponieważ było to kilka miesięcy temu, ale wydaje mi się, że ustawienie przepełnienia na ciele działało w Chrome, ale nie w Firefoksie (lub odwrotnie). Jednak użycie tagu HTML działało na obu.
Brad Azevedo,
Z pamięci może to być dziwna różnica w trybie.
thomasrutter
5

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

Marco Allori
źródło
5

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

<style>

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

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

</style>
Huu Phong Nguyen
źródło
4

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%;
}
Timo
źródło
3

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

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

Pranay Rana
źródło
3

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>
Rasel
źródło
2
Scrolljacking działa, ale prawie zawsze jest słabym doświadczeniem użytkownika.
Brandon Anzaldi
1
chociaż jest to możliwe, dobrym przykładem są ogromne problemy dla użytkowników technologii asystujących, gdy wyłączasz przewijanie i używasz javascript do obsługi przewijania. Jeśli nie ustawisz fokusu na elemencie za każdym razem, gdy przewijasz użytkownika, wówczas użytkownik AT zostanie całkowicie zagubiony. Ponadto każdy użytkownik stracił teraz dokładnie dostrojoną kontrolę nad tym, co widzi. Bardzo słaby UX do przejęcia przewijania dla twojego użytkownika. Oprócz kółka myszy musisz także obsługiwać klawisze góra / dół, rotory czytnika ekranu, kliknięcia myszą i sterowanie touchpadem. Staje się to niewygodne dla programisty i okropne dla użytkownika.
ShiningLight,
2

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

Stefan Mohr
źródło
1
Dobry link Miło jest wiedzieć, jak wynik w wielu przeglądarkach. Niestety liczba zrzutów ekranu z ukończonymi wynikami jest zepsuta
Chetabahana
0

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;
}
John Carroll
źródło