Ukrywanie paska przewijania na stronie HTML

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

Author: Peter Mortensen, 2010-07-21

21 answers

Ustaw overflow: hidden; na znaczniku body Tak:

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

I 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 tylko ukryć pasek przewijania, ale nie funkcję przewijania.

 435
Author: jao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:18:09

WebKit obsługuje pseudo elementy scrollbar, które mogą być ukryte za pomocą standardowych reguł CSS:

#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 następnie można łatwo przywrócić za pomocą width: auto, ale nie jestem fanem nadużywania width Dla Poprawek widoczności.

Firefox 64 obsługuje teraz eksperymentalny scrollbar-width właściwość domyślnie (63 wymaga ustawienia znacznika konfiguracji). Aby ukryć pasek przewijania w Firefoksie 64:

#element {
    scrollbar-width: none;
}

Aby sprawdzić, czy obecna przeglądarka obsługuje pseudo element lub scrollbar-width, spróbuj tego fragmentu:

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

(zauważ, że nie jest to naprawdę poprawna odpowiedź na pytanie, ponieważ ukrywa poziome paski, ale tego szukałem, gdy Google wskazał mi tutaj, więc pomyślałem, że opublikuję to w każdym razie.)

 1025
Author: Peter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:30:25

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ą Specyfikacja CSS, ani nigdy nie została zatwierdzona, ani prefiks sprzedawcy, ale działają w przeglądarce Internet Explorer i Konqueror. Można je również ustawić lokalnie w arkuszu stylów użytkownika dla każdej aplikacji. W Internet Explorerze znajdziesz go w zakładce "DOSTĘPNOŚĆ", w Konquerorze w zakładce" 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;
}
W przeglądarce Internet Explorer 8 te właściwości były poprzedzone 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

Dalsze informacje o Internet Explorer

Internet Explorer udostępnia scroll, 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.

W programie Microsoft Internet Explorer 6 i nowszych, gdy używasz deklaracji !DOCTYPE do określenia trybu zgodnego ze standardami, atrybut ten odnosi się do elementu HTML. Gdy tryb zgodny ze standardami nie jest określony, tak jak we wcześniejszych wersjach programu Internet Explorer, ten atrybut ma zastosowanie do elementu BODY, a nie elementu HTML.

Warto również 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


WebKit

Rozszerzenia WebKit związane z dostosowywaniem 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 */

Tutaj wpisz opis obrazka

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

  • {[10] – - 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 – dekret pseudo-Klasa dotyczy przycisków i elementów ścieżki. 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 - The pseudo-Klasa start ma zastosowanie do przycisków i ścieżek. 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. Dla utworów oznacza czy kawałek utworu opina parę przycisków.
  • :single-button – pseudo-Klasa pojedynczego przycisku ma zastosowanie do 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.
  • :corner-present – Odnosi się do wszystkich elementów paska przewijania i wskazuje, czy narożnik paska przewijania jest obecny.
  • {[20] – - 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 kombinacje

::-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 (Window.Scrollhandler handler)

Dodaje okno.Scrollevent handler Parametry:   handler - handler Zwroty:   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 scrollbars są wyświetlane w Firefoksie is ( 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.

Tutaj wpisz opis obrazka


Lekcja historii

Paski przewijania

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

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ć element ten 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żywany do sprawdzania stanu przewijania lub zmiany jego stanu (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:

Przykłady

 537
Author: davidcondrey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:18:04

Można to osiągnąć za pomocą owijarki div, która ma ukryty nadmiar, a wewnętrzna div ustawiona 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 scrollbar width across the devices that 
     * you are supporting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}
 110
Author: thgaskell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-12-30 22:36:54

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 go 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ż omówiony i wydaje się, że żadna odpowiedź Nie podsumowuje sytuacji w 2019 roku, chociaż wiele z nich zawiera doskonałe szczegóły. Przepraszam, jeśli ktoś inny to powiedział, a ja to przegapiłem.

 87
Author: Wilf,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:36:16

To działa 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;
 66
Author: Hristo Eftimov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:30:51

Myślę, że znalazłem dla was obejście, 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;}
 21
Author: Ben Yo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:39:33

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; 
}
[1]}został przetestowany na tablecie Samsunga 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).
 16
Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:32:34

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 pasek przewijania, wciąż będąc w stanie przewijać za pomocą myszy/klawiatury

 13
Author: Peter Örneholm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:23:47

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

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

Oto kilka przykładów:

 11
Author: Sergiy Sokolenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:23:16

Oprócz odpowiedzi Piotra:

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

To będzie działać tak samo dla Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }
 11
Author: JoshW,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:33:14

Podejście Cross browser do ukrywania paska przewijania.

[1]}został przetestowany na Edge, Chrome, Firefox i 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;
}
 10
Author: Blake Plumb,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:29:03

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.
 7
Author: Seth W. Klein,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-12 20:33:28

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.

 7
Author: Brad Azevedo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:26:20

Mój HTML jest taki:

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

Dodaj to do 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%;
}
 5
Author: Timo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:26:35

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

 5
Author: Marco Allori,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:33:20

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

<style>

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

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

</style>
 5
Author: Huu Phong Nguyen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:34:14

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

Dowiedz się więcej na ten temat: overflow .

 3
Author: Pranay Rana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:21:40

Moja odpowiedź przewija się nawet wtedy, 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>
 3
Author: Rasel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 16:23:40

Wierzę, że można nim manipulować za pomocą atrybutu overflow CSS, ale mają ograniczone wsparcie dla przeglądarki. Jeden ze źródeł powiedział, że to Internet Explorer 5( i Później), Firefox 1.5 (i Później) i Safari 3 ( i później) - może wystarczy dla Twoich celów.

przewijanie, przewijanie, przewijanie ma dobrą dyskusję.

 2
Author: Stefan Mohr,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-13 13:21:16

czy CSS może być używany do ukrywania paska przewijania? Jak byś to zrobił?

Jeśli chcesz usunąć pionowe (i poziome) paski przewijania z widoku przeglądarki, dodaj:

style="position: fixed;"

Do elementu <body>.


Javascript:

document.body.style.position = 'fixed';

CSS:

body {
  position: fixed;
}
 0
Author: Rounin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-28 17:39:05