Убрать прокрутку страницы средствами CSS

rail

Постоялец
Регистрация
23 Май 2010
Сообщения
97
Реакции
9
Подскажите плиз как запретить прокрутку страницы с помощью CSS
Нужно чтобы во всех браузерах работало.
 
Между <HEAD> добавить <STYLE TYPE="text/css">overflow-x: hidden; overflow-y: auto;</STYLE>
 
  • Нравится
Реакции: rail
Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 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
Спасибо, шас потестил, работает
хочу еще добавить - чтобы работало во всех браузерах нужно ставить именно
Код:
html { overflow-x: hidden; }
а то я сначала пытался делать
Код:
body { overflow-x: hidden; }
в Мозиле и Опере все нормально, а в IE никакой реакции.
 
Назад
Сверху