СКРИПТЫ
ТЕГИ:
php (319)
js (238)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
js date (32)
php array (31)
form html (30)
fonts (27)
link (26)
Показать еще :
online (25)
ruweb.net (24)
foto (22)
php file (21)
atom (20)
forum (19)
hosting (18)
svg (18)
php date (17)
board (16)
html book (16)
input (16)
php time (16)
color (15)
js events (14)
js url (14)
notepad (13)
osclass (13)
htaccess (13)
img (13)
js time (13)
php img (12)
select (12)
знак (12)
table (12)
dw block (12)
info (12)
php path (12)
download (11)
keyboard (11)
jsphp (11)
form (11)
icon (11)
mouse (10)
yandex (10)
js delete (10)
hover (9)
dosite (8)
comment (7)
cookie (7)
php url (7)
year (6)
mysql (6)
iframe (6)
browser (6)
list (6)
click (6)
php get (6)
adminka (5)
tag a (5)
js math (5)
chart (5)
heading (5)
reg.ru (5)
mb (5)
search (5)
ftp (5)
js id (5)
value (5)
base64 (4)
week (4)
day (4)
ssl (4)
bbcode (4)
нок (4)
vk (4)
js form (4)
submit (4)
php var (4)
month (4)
pages (4)
symbols (4)
task (4)
console (4)
куб (3)
captcha (3)
domen (3)
js post (3)
line (3)
ucoz (3)
numbers (3)
padding (3)
js img (3)
https (3)
js hash (3)
vs code (3)
scandir (3)
рся (2)
seo (2)
prompt (2)
counter (2)
height (2)
google (2)
details (2)
js vars (2)
video (2)
sitemap (2)
tag hr (2)
youtube (2)
arrows (2)
typeof (2)
money (2)
qr kod (2)
нод (1)
rutube (1)
jino (1)
cursor (1)
header (1)
speed (1)
windows (1)
archive (1)
smile (1)
scroll (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
html scrollbar
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.020879 секунд. Подробнее