Jak mogę automatycznie dodać pionowy pasek przewijania

Pojemnik Div ​​w HTML może mieć wiele elementów i podelementów i ma określony rozmiar. Czasami istnieje potrzeba dodania paska przewijania z kontenerem Div, gdy elementy przekraczają limit wielkości div lub gdy nie pasują do pojemnika Div właściwie.

W tym artykule omówiono przydatną metodę dodawania pionowego przewijania do div automatycznie za pomocą HTML i CSS.

Jak dodać pionowy pasek przewijania do div?

Deweloperzy mogą dodać pionowe paski przewijane do DIV, stosując „Olflow-Y: przewiń„Własność wraz z innymi właściwościami CSS na elemencie kontenera Div.

Przykład

Rozumiemy to z prostym przykładem, najpierw tworząc „div„Pojemnik z niektórymi elementami HTML w nim, a następnie zastosowanie CSS”przelewowy„Własność, aby dodać pionowy pasek przewijania z Div:

Oto kilka słynnych front-end i zaplecza
Języki:

Pyton

JavaScript

Jawa

Php

C#

Iść

Szybki

Rubin

Matlab

Maszynopis

Scala

Html

CSS

Rdza

Perl

SQL

R

NOSQL

C

C++

W powyższym fragmencie kodu:

• A "„Element został dodany z klasą ogłoszoną jako„Pasek przewijania".
• „„„Kontener ma w sobie listę dwudziestu języków front-end i zaplecza.

Teraz konieczne jest zastosowanie właściwości CSS do DIV poprzez dodanie selektora klasy:

.Pasek przewijania

Olflow-Y: Scroll;
Max-Height: 200px;
maksymalna szerokość: 300px;
Text-Align: Center;
kolor tła: Azure;

W powyższym fragmencie kodu CSS:

• „„przepełnienie-y„Własność o wartości”zwój”Dodaje się, aby utworzyć pionowy pasek przewijania dla Div.
• Potem „„maksymalna wysokość„Pojemnika Div zostało zdefiniowane jako„200px”I„ „maksymalna szerokość”Został zdefiniowany jako„300px".
• Wartość „tekst-align„Własność jest ustalona jako„Centrum„Aby wyrównać elementy wewnątrz Div do centrum. Odbywa się to tylko po to, aby uzyskać lepszą prezentację kontenera Div.
• Kolor tła dla div został zdefiniowany jako „lazur„To odróżni wygląd kontenera Div od reszty ekranu.

W rezultacie zostanie utworzony pojemnik Div ​​i będzie miał pionowy pasek przewijania po prawej stronie:

W ten sposób możemy automatycznie dodać pionowy pasek przewijania do div.

Wniosek

Pionowy pasek przewijania można dodać do div automatycznie, odnosząc się do elementu div za pomocą identyfikatora lub selektora klasy w elemencie stylu CSS, a następnie zastosować „Olflow-Y: przewiń„Własność do elementu DIV. Parametry paska przewijania pojawią się zgodnie z innymi dodanymi właściwościami, takimi jak „maksymalna wysokość" I "maksymalna szerokość”Pojemnika Div. Ten blog jest pouczającym przewodnikiem o metodzie dodawania pionowego paska przewijania do Div.