Зробити div вертикально прокручуваним легко за допомогою властивості переповнення CSS. Є різні значення в властивість переповнення . Ми можемо використовувати цю властивість для отримання смуги прокрутки на веб-сторінці. У наведених нижче прикладах показано способи встановлення вертикальної смуги прокручування на веб-сторінці.

Приклад 1: У цьому прикладі ми встановили overflow-x: hidden; і overflow-y: auto; який автоматично приховає горизонтальну смугу прокрутки та відобразить лише вертикальну смугу прокрутки.

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>голова>

`techcodeview.comh1>`
Це хороша платформа для вивчення програмування. Це освітній веб-сайт. Підготуйтеся до пошуку персоналу в таких компаніях, які базуються на продуктах, як-от Microsoft, Amazon, Adobe тощо, за допомогою безкоштовного онлайн-курсу підготовки до працевлаштування. Курс зосереджується на різних питаннях MCQ і кодуванні, які, ймовірно, будуть задані під час співбесід, і зробить ваш майбутній сезон розміщення ефективним і успішним. Крім того, будь-який гік може допомогти іншим гікам, написавши статті на techcodeview.com, публікація статей виконується за кілька кроків, тобто першими публікуються статті, які рецензенти потребують незначних змін/покращень. Щоб ваші статті були швидко розглянуті, ознайомтеся з наявними статтями, їх стилем форматування, стилем кодування та спробуйте наблизити їх. Якщо ви початківець, ви можете ознайомитися з Інструкціями щодо написання статті div> center> body> html>>>

Вихід:

Вихід

приклад 2: У цьому прикладі використовуйте auto замість overflow-x:hidden; і overflow-y:auto; щоб зробити div вертикально прокручуваним.

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>голова>