CSS Usuń pasek Scroll

Kiedy zwykle pracujemy w dowolnej interaktywnej aplikacji lub środowisku, możemy używać wielu widżetów, które są do tej pory osadzone w tej aplikacji. Te widżety mogą być przyciskami, paskami nawigacyjnymi, paskami przewijania, list rozwijanych, pola tekstowe i wiele innych. Mówi się, że pasek Scroll jest wspólnym widżetem używanym do patrzenia na ciągłe dane, obrazy i treści na stronie internetowej, których nie można zobaczyć bez przewijania. Możesz użyć paska scroll. Strony HTML pozwalają dodać paski przewijane, zmieniając rozmiar strony ręcznie za pomocą wskaźnika myszy. W tym przewodniku pokażemy, w jaki sposób użytkownik może dodać lub usunąć pasek przewijania.

Przykład 01:
Weźmy HTML, aby utworzyć automatyczny pasek przewijania na stronie internetowej. W tym celu nie musisz dodawać wielu właściwości lub tagów innych niż normalne zwykłe tagi dla akapitów i nagłówków. Zaczynaliśmy ten przykład od tworzenia nowego pliku HTML o nazwie „CSS”. Otwierając ten plik w kodzie Visual Studio, zaczęliśmy dodawać do niego skrypt HTML. Pierwszym dodanym w nim znacznikiem jest znacznik główny „HTML”, a następnie znacznik „głowa” i „ciała”.

Kiedy patrzymy na ciało tej strony HTML, ma ona jeden nagłówek drugiego co do wielkości (i.mi., H2) i dwa akapity za pomocą tagów „P”. Pierwszy znacznik akapitu zawiera długie dane typu tekstowego przenoszące się do następnego wiersza, podczas gdy drugi akapit zawiera proste dane jednokierunkowe. Drugi akapit zawiera również prosty „mocny” znacznik w nim, aby poczynić dwa słowa. W „stylu” znacznika „głowy” ustawiliśmy wartość wysokości i szerokości całego „ciała” strony HTML: odpowiednio 500px i 1000px.

Zapisz właśnie dodany skrypt HTML z Ctrl+S, dotknij menu „Uruchom” z paska zadań Visual Studio i kliknij „Uruchom bez debugowania”. Byłoby to poproszenie o narzędzie, w którym nasz kod zostanie wykonany. Wybierz przeglądarkę „Chrome” i możesz iść. Poniższe wyjście pokazano, że nagłówek i jego dwa akapity zostały wyświetlone. Ze względu na bardzo długie dane tekstowe w pierwszym akapicie i małe użycie okien w Chrome, otrzymaliśmy automatyczny pasek przewijany po prawej i dolnej przeglądarce. Wynika to z faktu, że każda przeglądarka ma osadzone paski przewijane, które byłyby wygenerowane po użyciu dużej ilości danych.

Teraz, aby zobaczyć pozostałą linię na stronie internetowej, przewiń w prawo za pomocą paska Scroll.

Spróbujmy usunąć pasek Scroll ze strony internetowej. Będziemy używać zestawu właściwości przepełnienia do „ukrytego” w stylu dla „ciała” strony internetowej. Nie pozwoli przeglądarce generować automatyczne paski przewijania, nawet jeśli dodamy dużą ilość danych do strony internetowej. Zapiszmy i uruchommy.

Po wykonaniu go w przeglądarce Chrome, mamy wyjście, jak się spodziewaliśmy. Mimo że pierwszy akapit zawiera długie dane tekstowe, przeglądarka nie wygenerowała pasków przewijania, aby zobaczyć pozostałą ukrytą linię. Trzeci akapit jest również ukryty w tym oknie przeglądarki rozmiaru.

Zmieniając rozmiar przeglądarki Chrome za pomocą wskaźnika myszy, trzeci akapit został wyświetlony teraz, jak pokazano poniżej.

Kiedy powiększymy okno przeglądarki z jego prawej strony, reszta ukrytej linii będzie wyświetlana bez użycia pasków przewijania.

Przykład 2:
Utwórzmy kolejny krótki przykład, aby zobaczyć, w jaki sposób możemy utworzyć więcej niż 1 pasek przewijania dla różnych podzielonych sekcji strony HTML. Zobaczymy też, jak możemy również usunąć jeden z tych pasków przewijania. Począwszy od znacznika HTML, dodaliśmy dwa znaczniki „Div” w głównym znaczniku „Body”. Pierwszy znacznik „div” został określony w klasie „A” do różnicowania na poziomie stylizacji. Drugi znacznik „Div” nie używał „klasy”, ponieważ używaliśmy stylizacji in-line dla tego konkretnego znacznika. Używamy specyficznej wysokości właściwości 10px i koloru tła, aby pokolorować sekcję „Purple”. Ta sekcja „div” zawiera dwie linie. Jeden z nich jest oznaczony tagiem „Mark”. Tag „znak” służy do podkreślenia tekstu określonego w nim do żółtego koloru i uczynienia go widocznym na stronie internetowej. Dodaliśmy zaznaczoną linię, ponieważ ten znacznik będzie używał paska Scroll. Oba znaczniki „Div” zostały zakończone tutaj po znaczniku „Mark”. Tabnik ciała został również zamknięty tutaj.

Rzućmy spojrzenie na znacznik stylu używany w znaczniku głowy tego skryptu HTML. Używamy obiektu klasy „A” do stylizacji zewnętrznej sekcji „Div”. Ustawiamy szerokość paska przewijania na „Brak” dla zewnętrznej sekcji „Div” przy użyciu właściwości Scrollbar w szerokości, a przepełnienie w kierunku pionowym zostało włączone, ustawiając wartość „przewijania” dla właściwości „przepełnienie-y”. Oprócz tego ustawiamy maksymalną wysokość zewnętrznej sekcji „Div” na 100px za pomocą właściwości maksymalnej dla klasy „A”. Styl i znacznik główny zostały tutaj ukończone i zapisaliśmy nasz kod do testowania wyjścia w przeglądarce Chrome za pomocą kodu Visual Studio.

Wyświetlacz strony internetowej tego skryptu HTML wyglądałby podobny do jak pokazano na poniższym obrazku. Pasek Scroll dla drugiej sekcji „Div” koloru fioletowego o wysokości 10px został wygenerowany w drugiej sekcji „Div” ze względu na jego wysokość, 150px. Tekst użyty w nim jest również podświetlany za pomocą znacznika „znak”. Z drugiej strony, zewnętrzna sekcja „Div” nie ma widocznego paska przewijania wygenerowanego w tym rozmiarze okna. To dlatego, że ustawiamy wartość dla właściwości „przewijania” zewnętrznej „Div” na „Brak”.

Możesz sprawić, by pasek Scroll był widoczny, zmieniając rozmiar okna zbyt małego, jak pokazano. Wygenerowanoby tylko pionowy pasek przewijania, ponieważ użyliśmy zestawu przepełnienia do „przewijania”. Nawet jeśli skrócisz okno z prawej strony, poziomy pasek przewijania nigdy nie zostałby wygenerowany.

Spróbujmy również usunąć automatyczny pasek przewijania z strony internetowej. W tym celu będziemy wypróbowywać ten sam kod HTML, aktualizując wartość jego właściwości „przepełnienie-y”. Ustawiliśmy to na „Brak”, aby nie wygenerowano żadnego pionowego paska zewnętrznego „Div”.

Bez aktualizacji żadnej innej rzeczy w tym skrypcie wykonaliśmy go i otrzymaliśmy dane wyjściowe Phise. Teraz, nawet jeśli zmienimy rozmiar chromowanego okna na znacznie mniejszy od lewej lub górnej dany, nie wygeneruje ono żadnego pionowego lub poziomego paska przewijania zewnętrznego „Div”.

Wniosek:

Dzisiejszy artykuł to zbiór niektórych przykładów HTML, aby zilustrować, w jaki sposób przeglądarki generują automatyczne paski przewijane i jak można je usunąć z przeglądarki. W pierwszym przykładzie wypróbowaliśmy znaczniki akapitu, aby dodać dużą ilość danych, aby automatycznie wygenerować paski przewijane i użyć właściwości przepełnienia, aby ukryć te paski przewijane. Oprócz tego próbowaliśmy wyraźnie usunąć jednocyierne paski przewijane ze strony internetowej za pomocą właściwości „Przelewu” stron HTML. Korzystanie z sekcji „Div” było całkiem pomoc.