СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
forum (19)
ruweb.net (19)
atom (19)
html book (17)
board (17)
Показать еще :
php file (16)
js method (16)
hosting (16)
svg (16)
link (15)
htaccess (13)
osclass (13)
color (13)
table (12)
path (12)
php date (11)
online (11)
yandex (11)
js delete (11)
icon (11)
jsphp (11)
input (11)
notepad (11)
form (10)
php img (10)
url (10)
mouse (9)
info (9)
img (7)
cookie (7)
comment (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

как сделать прокрутку html

Иногда требуется сделать прокрутку. Либо горизонтальную, либо вертикальную прокрутку html. Почему может не работать прокрутка?

Подробно о прокрутке в html

  1. Прокрутка "overflow"
  2. Прокрутка "overflow: auto"
  3. Прокрутка "overflow: scroll"
  4. Использовать горизонтальную или вертикальную прокрутку

  1. Прокрутка "overflow: auto"

    За вывод полосы прокрутки отвечает свойство "overflow"...

    Свойство overflow может принимать несколько значений:

    auto

    hidden

    inherit

    initial

    overlay

    revert

    scroll

    unset

    visible

    В браузере - как можно увидеть все значения прокрутки?

    нажимаем исследовать элемент добавляем свойство overflow и далее можно перебирать...

    В браузере - как можно увидеть все значения прокрутки?
    В браузере - как можно увидеть все значения прокрутки?


  2. Прокрутка "overflow: auto"

    Перейдем к примерам... использования и вывода прокрутки в html :

    Создаем блок div с текстом и стилями("3 способа css"):

    В свойствах заранее подразумеваем, что высота будет меньше предполагаемого текста.

    Для прокрутки ставим "overflow: auto":

    <div style="border: 1px solid; padding: 35px; height: 20px; overflow: auto;">
    как сделать прокрутку html - overflow: overflow: auto;
    как сделать прокрутку html - overflow: auto
    как сделать прокрутку html - overflow: auto
    как сделать прокрутку html - overflow: auto
    </div>
    Выведем ранее приведенный код прямо здесь:

    как сделать прокрутку html - overflow: overflow: scroll;

    как сделать прокрутку html - overflow: auto

    как сделать прокрутку html - overflow: auto

    как сделать прокрутку html - overflow: auto

    Результат вывода прокрутки в html:

    Как видим... при использовании "overflow: auto" произошел вывод только вертикальной прокрутки.

    Из-за того, что по горизонтали, внутренний размер блока не превышен его внешнего размера!

    Перейдем ко второму примеру прокрутки:


  3. Прокрутка "overflow: scroll"

    В принципе, по поведению scroll и auto похожи... вы можете потренироваться. заменить scroll на auto и обратно...

    Зададим нашему блоку размер "width: 200px;"

    Внутри него сделаем второй блок, который будет больше нашего выше приведенного размера "width: 500px;"

    И для примера прокрутки используем "overflow: scroll;"

    <div style="border: 1px solid; padding: 35px; height: 20px; overflow: scroll; width: 200px;">
     <div style="width: 500px;">
      как сделать прокрутку html - overflow: overflow: scroll;
      как сделать прокрутку html - overflow: overflow: scroll;
      как сделать прокрутку html - overflow: overflow: scroll;
      как сделать прокрутку html - overflow: overflow: scroll;
     </div>
    </div>

    Разместим приведенный код прокрутки ниже:

    как сделать прокрутку html - overflow: overflow: scroll;

    как сделать прокрутку html - overflow: overflow: scroll;

    как сделать прокрутку html - overflow: overflow: scroll;

    как сделать прокрутку html - overflow: overflow: scroll;

    Результат использования прокрутки "overflow: scroll;"

    Мы можем наблюдать на примере выведенной прокрутки, что и вертикальная и горизонтальная прокрутка в примере присутствует!


  4. Использовать горизонтальную или вертикальную прокрутку

    К примеру... вам требуется показать только один вид прокрутки... либо горизонтальный:

    overflow-x:

    Либо только вертикальную прокрутку:

    overflow-y:

    Разберем пример выводи одного типа прокрутки...

    Соответственно в зависимости от ваших потребностей меняем горизонтальную прокрутку букв "x" либо вертикальную прокрутку букв "y"

    <div style="border: 1px solid; padding: 35px; height: 20px; overflow-y: hidden; overflow-x: scroll; width: 200px;">

    <div style="width: 500px;">

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    </div>

    </div>

    Пример только одной прокрутки - горизонтальной:

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    как сделать прокрутку html - overflow: overflow-y: hidden; overflow-x: scroll;

    Результат вывода - только горизонтальная прокрутка

    В приведенном примере мы наблюдаем только одну прокрутку - горизонатльную!

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
как сделать прокрутку html
как сделать прокрутку страницы в html
как сделать полосу прокрутки в html
как сделать прокрутку горизонтального блока в html
показать полосу прокрутки
прокрутка в html

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb