Убрать прокрутку страницы средствами CSS
- Автор темы rail
- Дата начала
demon_cz
Писатель
- Регистрация
- 16 Июн 2011
- Сообщения
- 4
- Реакции
- 2
Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 1.
Пример 1. Страница без полос прокрутки
В данном примере используется значение hidden, которое «обрезает» весь контент выходящий за рамки элемента.
Также можно использовать свойство overflow-x, чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.
Пример 2. Нет горизонтальной полосы прокрутки
Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.
Пример 1. Страница без полос прокрутки
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Полосы прокрутки</title>
<style>
html { overflow: hidden; }
div { height: 2000px; }
</style>
</head>
<body>
<div>Бла-бла</div>
</body>
</html>В данном примере используется значение hidden, которое «обрезает» весь контент выходящий за рамки элемента.
Также можно использовать свойство overflow-x, чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.
Пример 2. Нет горизонтальной полосы прокрутки
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Полосы прокрутки</title>
<style>
html { overflow-x: hidden; }
div {
min-width: 800px; /* Минимальная ширина */
background: #fc0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div>Бла-бла</div>
</body>
</html>Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.
rail
Постоялец
- Регистрация
- 23 Май 2010
- Сообщения
- 97
- Реакции
- 9
- Автор темы
- #4
Спасибо, шас потестил, работает
хочу еще добавить - чтобы работало во всех браузерах нужно ставить именно
а то я сначала пытался делать
в Мозиле и Опере все нормально, а в IE никакой реакции.
хочу еще добавить - чтобы работало во всех браузерах нужно ставить именно
Код:
html { overflow-x: hidden; }
Код:
body { overflow-x: hidden; }