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

Тема в разделе "Верстка", создана пользователем rail, 18 май 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. rail

    rail Постоялец

    Регистр.:
    23 май 2010
    Сообщения:
    97
    Симпатии:
    8
    Подскажите плиз как запретить прокрутку страницы с помощью CSS
    Нужно чтобы во всех браузерах работало.
     
  2. E-body

    E-body

    Регистр.:
    6 сен 2007
    Сообщения:
    985
    Симпатии:
    331
    Между <HEAD> добавить <STYLE TYPE="text/css">overflow-x: hidden; overflow-y: auto;</STYLE>
     
    rail нравится это.
  3. demon_cz

    demon_cz Писатель

    Регистр.:
    16 июн 2011
    Сообщения:
    4
    Симпатии:
    2
    Способ основан на использовании свойства 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 нравится это.
  4. rail

    rail Постоялец

    Регистр.:
    23 май 2010
    Сообщения:
    97
    Симпатии:
    8
    Спасибо, шас потестил, работает
    хочу еще добавить - чтобы работало во всех браузерах нужно ставить именно
    Код:
    html { overflow-x: hidden; }
    а то я сначала пытался делать
    Код:
    body { overflow-x: hidden; }
    в Мозиле и Опере все нормально, а в IE никакой реакции.