Jak ukryć pasek przewijania w CSS

W przeglądaniu internetowym pasek przewijania pojawia się pionowo i poziomo, umożliwiając użytkownikom przewijanie w górę i lewej prawej. Korzystając z CSS, możemy ustawić atrybuty paska przewijania zgodnie z naszym wyborem. Na przykład ukrywanie i modyfikowanie jego koloru i szerokości. W tym artykule dowiemy się, jak ukryć pasek przewijania za pomocą właściwości CSS.

Wśród wielu sposobów ich ukrycia najczęstszym są przepełnienie i właściwości Webkit-Scrollbar.

Oto kilka praktycznych przykładów, w których ukryjemy pasek przewijania za pomocą tych właściwości.

W porządku, zacznijmy!

Ukryj pasek przewijania za pomocą właściwości przepełnienia w CSS

„„przelewowy”Właściwość określa, jak będzie wyglądać treść, gdy przepełni się z pola treści, na przykład, przycinając, wyświetlanie pasków przewijania lub wyświetlanie poza pudełkiem.

Składnia

W CSS właściwość przepełnienia ma następującą składnię:

Przepełnienie: wartość

W miejscu wartości możemy ustawić różne wartości/parametry właściwości przepełnienia, takie jak Visible, Hidden, Scroll, Auto i dziedzictwo. Przypisz „ukryty„Wartość właściwości przepełnienia, aby ukryć pasek przewijania.

Oto praktyczny przykład, który w lepszy sposób ilustruje tę koncepcję.

Przykład: Jak ukryć pasek przewijania w CSS za pomocą właściwości przepełnienia?

Utwórzmy akapit wewnątrz za pomocą

tag w następujący sposób:

Przeglądamy w górę i lewą stronę internetową, przeglądając sieć za pomocą paska przewijania, który pojawia się pionowo i poziomo. W html domyślnie pojawia się. Za pomocą CSS możemy ustawić atrybuty paska przewijania zgodnie z naszym wyborem i.E szerokość przewijania i kolor również. Ukrywamy również pasek przewijania za pomocą CSS.
Wśród wielu sposobów ich ukrycia najczęstsze są przepełnienie, szerokość przewijania i właściwości Webkit-Scrollbar.

Wynikiem danego kodu będzie:

Tutaj widzimy, że pasek przewijania pojawia się pionowo. Użyjmy właściwości przepełnienia CSS, aby ją ukryć.

W CSS napisz następujący kod i ustaw właściwość przepełnienia na „ukryty”:

ciało
Olflow: ukryty;

W rezultacie pasek przewijania zniknie ze strony:

Widzimy, że pasek scroll został usunięty, ale funkcjonalność paska przewijania jest również wyłączona. Jednak za pomocą CSS możemy ukryć pasek Scroll bez wyłączania jego funkcjonalności.

Ukryj pasek przewijania w CSS za pomocą właściwości „Webkit-Scrollbar”

„„WebKit-Scrollbar„Pseudoelement może być używany do stylizowania paska do elementu w CSS. Pomaga nam również w ukryciu paska przewijania. Ta nieruchomość działa tylko w przeglądarkach opartych na Webkit, takich jak Chrome, Opera, Safari, Edge itp.

Składnia

Aby zrozumieć właściwość WebKit, musimy najpierw zrozumieć jej składnię:

Body ::-Webkit
/ *wyświetlacz, szerokość, styl */

Webkit ma następujące elementy, które służą różnym funkcjom, niektóre to:

• WebKit-Scrollbar: Służy do modyfikacji całego paska przewijania.
• WebKit-Scrollbar-Button: Służy do modyfikacji w górę przycisków lewej prawej paska przewijania.
• WebKit-Scrollbar-Track: Służy do modyfikacji ścieżki przewijania.
• WebKit-Scrollbar-Ghumb: Służy do modyfikowania przeciągnego uchwytu przewijania.
• Webkit-Resizer: Służy do zmiany zmiany rozmiaru lub modyfikowania przeciągającego uchwytu.

Aby ukryć pasek przewijania, „WebKit-Scrollbar„Zastosuje się pseudoelement.

Przykład: Jak ukryć pasek przewijania w CSS za pomocą właściwości WebKit?

Aby ukryć pasek przewijania za pomocą „WebKit-Scrollbar„Właściwość, ustaw wartość wyświetlacza na„nic" jak poniżej:

Body ::-WebKit-Scrollbar
Nie wyświetla się;

Teraz na stronie internetowej możemy przewijać długą stronę internetową bez widzenia paska Scroll:

Scroll pasek został ukryty i możesz przewijać zawartość przeglądarki za pomocą klawiszy w górę.

Wniosek

CSS „przelewowy" I "Webkit„Właściwości pozwalają nam ukryć pasek przewijania przed stroną. Właściwość przepełnienia wyłącza również funkcjonalność przewijania; Jednak właściwość WebKit umożliwia przewijanie za pomocą klawiszy strzałek. Ten zapis wyjaśnił, jak działają przepełnienie właściwości i nieruchomości Webkit w CSS.