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

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

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

Інструкція

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

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

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

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

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

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

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

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

    </ Div>

    Тут overflow: auto означає, що смуги прокрутки будуть з’являтися автоматично, тобто коли вміст шару не буде вміщатися в задані розміри. Якщо auto замінити на scroll, то ці смуги будуть присутні завжди, незалежно від того потрібні вони чи ні. А значення hidden надасть протилежну дію — прокрутка ніколи не буде з’являтися, навіть якщо вмісту цього контейнера не буде видно за його краями.
  3. Застосовуйте аналогічний спосіб і для додавання смуг прокручування до сторінки в цілому. За умовчанням вони з’являються в міру необхідності, але якщо з якої-небудь причини виникне необхідність в їхньому постійному присутності на сторінці, то у вихідний html-код слід додати відповідне правило стилю. Знайдіть у коді сторінки закриває тег заголовної частини документа </ head> і перед ним впишіть ці стильові інструкції:

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