Як додати смугу прокрутки

Як додати смугу прокрутки


Смуги прокрутки(Scroll bars) - це вертикальна і горизонтальна смужки, що розміщуються уздовж правого(при письмі ліворуч на право) і нижнього країв вікна або окремої області усередині вікна, призначені для переміщення вмісту у вертикальному або горизонтальному напрямах. Для управління їх зовнішнім виглядом і поведінкою у веб-сторінках використовуються елементи мови описи стилів CSS(Cascading Style Sheets - "Каскадні таблиці стилів"), вбудовані в мову HTML.


 

Інструкція

1. Використайте тег div, якщо треба зробити смугу прокрутки не для усієї сторінки, а тільки для обмеженої її області. У мові HTML(HyperText Markup Language - "мова розмітки гіпертексту") "тегами" називають окремі команди браузеру відобразити той або інший елемент сторінки. У найпростішому виді тег div(його часто називають "шаром") пишеться так:

<div>Це текст усередині шару</div>

Тут <div> - відкриваючий тег, а </div> - що закриває. Все, що розміщено між тим, що відкриває і закриває тегами, знаходиться в шарі як в контейнері і цьому контейнеру можна задавати розміри - ширину і висоту. Це робиться за допомогою додаткового параметра("атрибуту") style, який слід додати у відкриваючий тег:

<div style= width:300 px; height:300 px;>

Це текст усередині шару

</div>

2. Вказуйте в атрибуті style тега div і правила для смуг прокрутки шару теж:

<div style= width:400 px; height:200 px; overflow: auto;>

Це текст усередині шару

</div>

Тут overflow: auto означає, що смуги прокрутки з'являтимуться автоматично, тобто коли вміст шару не уміщатиметься в задані розміри. Якщо auto замінити на scroll, то ці смуги будуть присутніми завжди, незалежно від того потрібні вони або ні. А значення hidden зробить протилежну дію - прокрутка ніколи не з'являтиметься, навіть якщо утримуваного цього контейнера не буде видно за його краями.

3. Застосовуйте аналогічний спосіб і для додавання смуг прокрутки до сторінки в цілому. За умовчанням вони з'являються в міру необхідності, але якщо з якої-небудь причини виникне необхідність в їх постійній присутності на сторінці, то в початковий html- код слід додати відповідне правило стилю. Знайдіть в коді сторінки закриваючий тег заголовної частини документу </head> і перед ним впишіть ці стильові інструкції:

<style type= text/css>body {overflow: scroll;}</style>