Usuń poziomy pasek ScrollBar CSS
Po co usunąć pasek przewijania?
Chociaż w projektowaniu stron internetowych nie jest zalecane, aby zmienić domyślne zachowanie przeglądarki, są chwile, kiedy jest to konieczne. Na przykład pasek przewijania, który pojawia się po przepełnieniu treści elementu, może być trudny do dostrzegania, jeśli zajmuje niewielką część strony internetowej. Ponadto całkowicie usunięcie paska przewijania ma sens, ponieważ jako projektant stron internetowych możesz nie myśleć o przewijaniu na stronie internetowej. Niezależnie od uzasadnienia ukrycia się Scroll paska CSS, należy rozważyć kompatybilność krzyżową. Dodatkowo, po ukryciu paska Scroll, zapisz podgląd strony internetowej, aby upewnić się, że działa zgodnie z przeznaczeniem na urządzeniach stacjonarnych i mobilnych.
Usuwanie paska przewijania w CSS:
Treść, która przekracza granice jego kontenera, można obsłużyć za pomocą atrybutu przepełnienia w CSS. Jeśli zawartość elementu jest większa niż dostępna przestrzeń, możesz użyć tej właściwości do przypisania, ukrywania lub przewijania treści. Funkcje obsługi przewijania przepełnienia w mediach wizualnych są zawarte w tym module CSS. W CSS przepełnienie występuje, gdy zawartość kontenera minie jeden lub więcej krawędzi pojemnika. Zasadniczo określa, co dzieje się, gdy zawartość elementu jest zbyt duża, aby zmieścić się w kontekście bloków.
Właściwość CSS nadmiernie przepływu obsługuje następujące wartości:
automatyczny: Aby dodać pasek przewijania, ale zrobi to tylko wtedy.
widoczny: Aby umożliwić wyświetlanie treści, nawet gdy się przepełnia.
zwój: Aby przypiąć treść i zobaczyć pozostałą treść, doda pasek przewijania.
ukryty: Pokaże widzialną treść, a pozostała treść zostanie ukryta.
spinacz: Pinuje zawartość elementu do pudełka.
Możemy ustawić wartości Scroll paska z przepełnieniem-X, aby kontrolować poziomy pasek Scroll, przepełnienie-y dla pionowego paska przewijania i przepełnienia będą obsługiwać jedno i drugie.
Przykład 01: Ukrywanie poziomego paska przewijania w CSS
Zacznijmy od podstawowego przykładu usunięcia paska Scroll ze strony internetowej za pomocą CSS. Niestety, nie ma określonej reguły CSS, której można użyć do zniknięcia paska Scroll, a jednak umożliwia użytkownikom przewijanie strony lub elementu. Przy użyciu kilku zasad CSS specyficznych dla przeglądarki jest to nadal wykonalne. Zastosuj następujące CSS na treść strony internetowej (dla pełnej strony) lub pojedynczego elementu, aby ukryć lub usunąć pasek przewijania i utrzymać funkcję przewijania.
Jak widać powyżej, możemy użyć różnych sposobów, aby paski przewijania zniknęły w różnych przeglądarkach. W powyższym przykładzie element jest określonym obszarem lub selektorem, z którego chcesz usunąć paski przewijane. W tym przykładzie utworzymy prostą przykładową stronę, aby pokazać, w jaki sposób możesz ukryć poziomy pasek przewijania, ale jego funkcjonalność przewijania będzie działać. Utworzymy stronę internetową za pomocą> tagów. Wewnątrz tych znaczników utworzymy elementy głowy i ciała, aby zdefiniować korzeń i korpus elementu.
Atrybut „Wyświetlacz: Brak” sprawi, że pasek zniknie bez wpływu na jego funkcjonalność przewijania.
Aby ukryć poziomy pasek przewijania, pozwolimy naszemu treściom przekroczyć poziomy limit strony. W tym celu użyjemy „Białej przestrzeni: nowrap;” Umożliwi to tekst pozostanie na tej samej linii, dopóki nie użyjemy znacznika linii przerwy. W starszych przeglądarkach, takich jak „Internet Explorer”, ustawimy „atrybut -ms-verflow w stylu: Brak”. Podczas gdy w współczesnych przeglądarkach, jak w Firefox, możemy użyć „Scrollbar szerokość: Brak” oraz dla Chrome i innych nowoczesnych przeglądarek, „Display: Brak” można użyć. Kiedy treść wykracza poza poziome granice elementu na poziomie bloków, właściwość przepełnienia-X CSS określa, co wyświetla.
Możemy zrobić to samo dla elementów div, używając selektorów DIV w CSS.
Korzystając z powyższego kodu, otrzymamy stronę w następujący sposób:
Jak widać, jest to tak samo jak poprzedni, ale tym razem użyliśmy selektorów Div, aby ukryć paski przewijania pojemników. Stylizowaliśmy Div, określając jego granicę jako 5px solid czarny, promieniowanie granic 5px, wysokość 150px i szerokość pojemnika Div, która wynosi 300px.
Przykład 02: Usunięcie paska przewijania i wyłączenie jego funkcjonalności w CSS
Dzięki funkcji przepełnienia CSS CSS umożliwia zarówno zniknięcie paska przewijania, jak i wyłączenie przewijania. Obsługa zawartości przekraczającej granice jej kontenera jest zarządzana przez te właściwości. Ukrywanie poziomego paska Scroll może być pomocne, ponieważ poziome przewijanie jest często okropnym wyborem. Korzystając z „przepełnienia-X: ukryty”, możemy sprawić, że poziomy pasek przewijania zniknie i zatrzymamy przewijanie poziome. Po prostu dodaliśmy regułę „przepełnienie: ukryty” do ciała elementu kontenera, aby przestać przewijać podczas używania tego atrybutu. To ukryje wszystkie materiały, które rozciągają się za granicą elementu.
Korzystając z tego kodu, nasz poziom poziomy zniknie i nie będziemy w stanie przewinąć w lewo lub w prawo.
Jak widać, użycie „przepełnienia-X: Hidden” usunęło poziomy pasek przewijania, a także funkcjonalność przewijania lewej lub prawej.
Jednak, aby wyświetlić materiał, który rozszerza granice pojemnika, użyj przepełnienia: widoczny jako alternatywa.
Jak widać, obraz przekracza granice pojemnika.
Przykład 03: Usuwanie poziomego paska przewijania, aż go potrzebujemy
W niektórych sytuacjach ukrywanie paska przewijania może poprawić Twój projekt. W innych przypadkach usunięcie tej części strony może pogorszyć wrażenia użytkownika. Większość odwiedzających łączy pasek przewijania z działaniem przewijania. Dlatego może wydawać się niezwykłe dla innych, jeśli korzystasz z tej techniki na całej stronie internetowej. Dodatkowo słupki przewijania wskazują, ile strony jest nadal widoczne. Brak paska przewijania może być odrażający, chyba że masz kolejną wizualną wskazówkę, że wciąż można zobaczyć więcej treści. Testowanie użytkowników może ujawnić, w jaki sposób brak paska przewijania wpływa na wrażenia użytkownika Twojej witryny, chociaż w wielu sytuacjach ukrywanie paska Scroll, dopóki użytkownik nie rozpocznie przewijania, jest inteligentnym kompromisem.
Ponieważ przepełnienie jest ustawione na automatyczne, słupki nie pojawią się, jeśli treść nie jest większa niż granice okna przeglądarki.
Jak widać, nie ma poziomego paska przewijania, ponieważ limit nie został przekroczony. Po przekroczeniu limitu pasek przewijania pojawi się na ekranie do przewijania.
Jak widać w kodzie HTML, treść w
jest większy niż poprzedni przykład, więc poziomy pasek przewijania pojawi się na dole.
Scroll pasek jest dodawany przez ustawienie automatyczne, ale nie pojawi się, chyba że istnieje przepełnienie treści. W rezultacie ukryty pasek pojawia się tylko wtedy, gdy jest to wymagane.
Wniosek
Ponieważ ułatwia nawigację, pasek Scroll jest pomocnym wskaźnikiem wizualnym dla większości odwiedzających. Jednak w niektórych okolicznościach możesz celowo go ukryć, aby poprawić lub zmienić swój projekt. Z zaledwie kilkoma zasadami z naszego artykułu możesz użyć CSS, aby ukryć pasek Scroll na stronie lub elemencie HTML. W tym samouczku nauczyliśmy się ukryć pasek przewijania i jak działa ta funkcja w różnych przeglądarkach. Teraz, po ukończeniu tego samouczka, powinieneś być w stanie łatwo usunąć lub ukryć paski przewijane.