Zapewnienie przewijania elementu div w pionie jest łatwe przy użyciu właściwości przepełnienia CSS. Istnieją różne wartości w pliku właściwość przepełnienia . Możemy użyć tej właściwości do uzyskania paska przewijania na stronie internetowej. Poniższe przykłady przedstawiają sposoby ustawiania pionowego paska przewijania na stronie internetowej.

Przykład 1: W tym przykładzie ustawiliśmy overflow-x: ukryte; i przepełnienie-y: auto; co automatycznie ukryje poziomy pasek przewijania i wyświetli tylko pionowy pasek przewijania.

HTML

> <> html> >> <> head> >> > <> style> >> > h1 {> > color: Green;> > }> > div.scroll {> > margin: 4px, 4px;> > padding: 4px;> > background-color: green;> > width: 500px;> > height: 110px;> > overflow-x: hidden;> > overflow-y: auto;> > text-align: justify;> > }> > style>głowa>

`techcodeview.comh1>`
Jest to dobra platforma do nauki programowania. Jest to portal edukacyjny. Przygotuj się do rekrutacji firm opartych na produktach, takich jak Microsoft, Amazon, Adobe itp., korzystając z bezpłatnego kursu online przygotowującego do stażu. Kurs koncentruje się na różnych pytaniach związanych z MCQ i kodowaniem, które mogą zostać zadane podczas rozmów kwalifikacyjnych, dzięki czemu nadchodzący sezon stażowy będzie skuteczny i udany. Ponadto każdy maniak może pomóc innym maniakom, pisząc artykuły na techcodeview.com, publikowanie artykułów odbywa się w kilku krokach, przy czym artykuły wymagające niewielkich modyfikacji/ulepszeń ze strony recenzentów są publikowane jako pierwsze. Aby szybko uzyskać recenzję swoich artykułów, zapoznaj się z istniejącymi artykułami, ich stylem formatowania, stylem kodowania i staraj się być blisko nich. Jeśli jesteś początkujący, możesz zapoznać się z Wytycznymi, aby napisać artykuł div> center> body> html>>

Wyjście:

Wyjście

Przykład 2: W tym przykładzie użyj auto zamiast overflow-x:hidden; i przepełnienie-y:auto; aby div był przewijany w pionie.

HTML

> <> html> >> <> head> >> > <> style> >> > h1 {> > color: Green;> > }> > div.gfg {> > margin: 5px;> > padding: 5px;> > background-color: green;> > width: 500px;> > height: 110px;> > overflow: auto;> > text-align: justify;> > }> > style>głowa>