В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
html (147)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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

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

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

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

  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;

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

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


  5. Почему не работает прокрутка?

    Интересный вопрос попался:

    Почему не работает прокрутка?

    Одна из банальных причин, почему может "не работать прокрутка" - отсутствие прописанной "высоты!"(height)

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.023093 секунд. Подробнее