Ukrywanie paska przewijania na stronie HTML
Czy CSS może być użyty do ukrycia paska przewijania? Jak byś to zrobił?
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.
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.)
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
- MSDN. Podstawowe właściwości UI
- W3C. o niestandardowych właściwościach paska przewijania
- MSDN. . NET ScrollBar Klasa
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 */
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.
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.
Lekcja historii
Tylko dlatego, że jestem ciekawy, chciałem dowiedzieć się o pochodzeniu scrollbarów, a 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ć 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:
- 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
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.
###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;
}
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.
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;
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;}
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).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
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:
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;
}
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 SafariUkryj pasek przewijania, wciąż będąc w stanie przewijać za pomocą kółka myszy!
/* 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;
}
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.
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
.
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%;
}
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;
}
}
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>
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 .
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>
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ę.
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;
}
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