Bez wątpienia przewijanie odgrywa istotną rolę w aplikacjach internetowych. Jednak w pewnym momencie nie możesz potrzebować tego paska przewijania. Na przykład, jeśli kontener obejmuje tylko dwadzieścia pięć procent strony internetowej i jest on wyrównany w lewo, dodany pasek przewijania z pewnością wejdzie na środek. W takiej sytuacji możesz użyć kilku właściwości CSS do wyłączenia paska przewijania.

Ten artykuł obejmie metodę wyłączenia paska przewijania w CSS.

Jak wyłączyć pasek przewijania w CSS?

Aby wyłączyć pasek przewijania na stronie, użyj następujących właściwości CSS:

• przepełnienie-y (Wyłącz pionowy pasek przewijania)
• przepełnienie-x (Wyłącz poziomy pasek przewijania)
• przelewowy (Wyłącz pionowe i poziome paski przewijania)

Zbadajmy każdą właściwość CSS jeden po drugim.

Metoda 1: Użyj właściwości przepełnienia-Y, aby wyłączyć pionowy pasek przewijania w CSS

„„przepełnienie-y„Właściwość określa, co się stanie, jeśli treść nie pasuje do kontenera w sposób pod względem wysokości. Jest również wykorzystywany do wyświetlania zawartości przepełnienia elementu na poziomie bloku oraz do dodania lub wyłączenia paska przewijania.

Weźmy więc przykład, aby sprawdzić procedurę wyłączania pionowego paska przewijania za pomocą właściwości przepełnienia Y CSS.

Przykład

Dla naszej strony HTML wyłączymy pionowy pasek przewijania obecnego po prawej stronie:

Umieść pożądane elementy HTML, ponieważ w naszym przypadku dodamy nagłówek w „„Tag pliku HTML:

Wyłączanie paska przewijania

Aby ukryć pionowy pasek przewijania, ustaw „przepełnienie-y„Własność do„ukryty". Wysokość i szerokość „200%”Będzie używany do tego, aby strona była dłuższa i szersza. W ten sposób celowo dostaniemy paski przewijania na naszej stronie:

Zapisz podany kod i uruchom swój plik HTML w przeglądarce:

Jak widać, z powodzeniem wyłączyliśmy pionowy pasek przewijania za pomocą właściwości przepełnienia Y CSS.

Metoda 2: Użyj właściwości przepełnienia-X, aby wyłączyć poziomy pasek przewijania w CSS

Gdy treść nie pasuje do kontenera w sposób szerokości, „przepełnienie-x„Własność służy do zarządzania takimi scenariuszami. Ustawia to, co pokazuje, gdy dodana zawartość przepełnia prawą i lewą krawędzie elementu na poziomie bloku. Tę właściwość CSS można również wykorzystać do wyłączenia poziomego paska przewijania.

Przykład

Teraz wyłączymy poziome poziome podświetlanego paska przewijania na naszej stronie HTML:

Aby ukryć poziomy pasek przewijania, ustaw „przepełnienie-x Do "ukryty”I dodaj wartość właściwości wysokości i szerokości, jak podano w poprzednim przykładzie:

Wyjście

Chcesz jednocześnie wyłączyć poziomy i pionowe pręty? Jeśli tak, postępuj zgodnie z następną sekcją!

Metoda 3: Użyj właściwości przepełnienia, aby wyłączyć pionowe i poziome paski przewijania w CSS

Gdy zawartość nie pasuje do kontenera poziomo i pionowo, „przelewowy”Właściwość określa, czy dodać słupki przewijania, czy przypiąć zawartość. Możesz także użyć tej właściwości CSS do jednoczesnego wyłączania pionowych i poziomych pasków przewijania.

Przykład

W tym samym pliku HTML dodamy „przelewowy”Właściwość i przypisz to„ukryty" wartość. To wyłączy pasek przewijania dla obu miejsc, poziomo i pionowo:

Wyjście

Zaproponowaliśmy instrukcje dotyczące wyłączania pasków przewijania za pomocą różnych właściwości CSS.

Wniosek

Aby wyłączyć paski przewijania w CSS, możesz użyć „przepełnienie-x”,„przepełnienie-y”I„ „przelewowy" nieruchomości. Właściwość przepełnienia-X jest wykorzystywana specjalnie do wyłączenia pionowego paska przewijania, a właściwość przepełnienia Y, aby wyłączyć poziome paski przewijania. Ponadto przepełnienie właściwości pomaga jednocześnie wyłączać pionowe i poziome słupki. W tym artykule omówiono metody wyłączania pasków przewijania w CSS.