Как сделать прокрутку страницы в html
Разрешить или запретить прокрутку страницы можно сделать с помощью элемента div и свойства overflow в CSS.
Например, создадим блок с классом scroll и применим к нему свойство overflow-y: scroll; :
class="scroll"> .scroll height: 200px; /* Высота блока */ overflow-y: scroll; /* Включаем вертикальную прокрутку */ > Теперь, если содержимое блока scroll превысит высоту блока, то появится полоса прокрутки, с помощью которой можно будет прокручивать содержимое.
overflow
Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.
Синтаксис
overflow: auto | hidden | scroll | visible | inherit
Значения
visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
overflow Duis te feugifacilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow
Объектная модель
[window.]document.getElementById(» elementID «).style.overflow
Браузеры
Internet Explorer до версии 7.0 включительно:
- не поддерживает значение inherit ;
- относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .
Internet Explorer 8:
- Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
- Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
- Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.
Прокрутка содержимого таблицы
Чтобы сделать таблицу с фиксированной высотой и вертикальной прокруткой потребуется разделить её на две части. В первой будет заголовок таблицы, во второй части, тело в контейнере со свойством overflow-x: auto .
Название блюда Белки Жиры Углеводы Ккал Азу 11,9 14,2 10,2 214 CSS-стили:
.scroll-table-body < height: 300px; overflow-x: auto; margin-top: 0px; margin-bottom: 20px; border-bottom: 1px solid #eee; >.scroll-table table < width:100%; table-layout: fixed; border: none; >.scroll-table thead th < font-weight: bold; text-align: left; border: none; padding: 10px 15px; background: #d8d8d8; font-size: 14px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; >.scroll-table tbody td < text-align: left; border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding: 10px 15px; font-size: 14px; vertical-align: top; >.scroll-table tbody tr:nth-child(even) < background: #f3f3f3; >/* Стили для скролла */ ::-webkit-scrollbar < width: 6px; >::-webkit-scrollbar-track < box-shadow: inset 0 0 6px rgba(0,0,0,0.3); >::-webkit-scrollbar-thumb
Таблица с прокруткой и фиксированным заголовком
Недавно понадобилось разместить длинную и широкую таблицу на странице. Выход только один: сделать ее скроллируемой. Основным требованием являлась возможность одновременной прокрутки таблицы по горизонтали и вертикали.
Первый вариант
Способов существует несколько, самым простым из которых является обертка таблицы в с указанием ширины (и/или высоты) и стиля: overflow:auto . Например так:
div.scroll-table
Минимум усилий — неплохой результат: удобнее в пользовании и помогает избежать разваливания блочной верстки в Internet Explorer.
Второй вариант
Однако для полного удовлетворения не хватает одной простой вещи, а именно — фиксации заголовков таблицы, чтобы при прокрутке они не пропадали из вида. Вроде бы просто, но я смог найти универсальный способ лишь для IE (кто бы мог подумать).
Делается это так. Для начала составляем правильную структуру таблицы:
Название позиции Бренд Стоимость . . .
Подробнее про «правильные» таблицы читайте у Роджера Йохансона.
Теперь нам достаточно прописать парочку правил, чтобы заставить IE фиксировать наши заголовки:
.scroll-table tr.fixed
Кроме того, важно добавить правило position:relative к блоку scroll-table , чтобы заголовок таблицы не «вылез» наверх. Это требуется только при работе в стандартном режиме (т. е. с указанием верного DOCTYPE).
Таблица 2 — в этом случае таблица прекрасно работает в IE 5/6. В остальных же браузерах она ведет себя аналогично предыдущему примеру, т. е. вполне пригодна к использованию.
. а теперь для Firefox
Обычно с этим браузером проблем гораздо меньше, чем с IE. В данном же случае, я так и не смог найти приличного решения. Способа два (по сути, это один вариант с небольшим отличием):
- Сделать таблицу фиксированной ширины — тогда заголовки фиксируются нормально
- Сделать таблицу динамической, но при этом «потерять» скроллбар при маленьком размере таблицы
Правила для Firefox выглядят примерно так:
.scroll-table>table tbody
Для начала мы спрятали это правило от IE, указав .scroll-table>table — это селектор для дочернего элемента, который IE не понимает.
Правда это не сработает для 7-ой версии IE — поэтому правильнее всего будет применить здесь conditional comments, да и вообще, хватит уже.
Далее мы указали требуемую высоту основной части таблицы tbody . И назначили ей поведение overflow:auto , отвечающее за появление полос прокрутки. Правило overflow-x:hidden работает только в FF 1.5 (если не ошибаюсь) и служит для убирания «лишнего» скроллбара с чисто декоративными целями.
Данный способ мне кажется наиболее простым и понятным, хоть он и не лишен недостатков. Если кто-то знает лучший способ решить подобную задачу — прошу отписаться в комментариях =)
Ссылки по теме
- Способ, на котором я основывался
- Вариант с фиксированной шириной и без поддержки Оперы
- Опять же фиксированная ширина + страшный исходник
- Этот работает не совсем хорошо