Отключить горизонтальную полосу прокрутки из-за DIV с позицией: абсолютная, которая находится за пределами страницы - PullRequest
Новая
       25

Отключить горизонтальную полосу прокрутки из-за DIV с позицией: абсолютная, которая находится за пределами страницы

34 голосов
/ 24 мая 2011

У меня есть абсолютно позиционированный элемент, который находится «снаружи» страницы, но я хочу, чтобы браузеры (я использую Firefox 3) не отображали горизонтальные полосы прокрутки.Кажется, что показывать div, который расположен слева (например, имеет «left: -20px»), это нормально, и полоса прокрутки не отображается.Однако то же самое справа ("right: -20px") всегда показывает полосу прокрутки.Можно ли скрыть полосу прокрутки, но сохранить стандартную прокрутку возможно?Я имею в виду, что хочу отключить прокрутку только из-за этого элемента с абсолютным позиционированием, но продолжать прокручивать из-за других элементов (я знаю, что могу полностью отключить полосы прокрутки, это не то, что я хочу). 

<!DOCTYPE html>
<html>
<body>
  <div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
    element
  </div>
  <div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
    element
  </div>
  <h1>Hello</h1>
  <p>world</p>
</body>
</html>

Ответы [ 7 ]

37 голосов
/ 24 мая 2011

Да, возможно, в вашем html-теге введите style="overflow-x: hidden". Это сработает ...

24 голосов
/ 19 апреля 2012

На самом деле это можно сделать с помощью прямого CSS, без каких-либо ограничений по ширине страницы и т. Д. Это можно сделать:угол страницы.Сделайте его ширину и высоту 100%

Создайте еще один div, такой же, но без скрытого переполнения Добавьте класс для div, который оборачивается вокруг содержимого созданных, делая его положение относительнои придание ему любой ширины, которую вы хотите, чтобы содержание главной страницы имело Добавьте содержимое этого класса в каждый из созданных вами элементов div.

Содержимое вашего первого элемента div будетоставайтесь правильно выровненными с содержимым вашего второго div, но любое его содержимое, которое выходит за периметр окна, будет усечено.

Вот рабочий пример, который держит изображение в фиксированном положении относительно остальныхсодержимого без использования JavaScript: 

#widthfitter {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#contentWrapper {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
}

.content {
  width: 600px;
  position: relative;
  text-align: left;
  margin: auto;
}
<div id="widthfitter">
  <div class="content">
    <img src="https://i.stack.imgur.com/U5V5x.png" style="position:absolute; top: 240px; left: 360px" />
  </div>
</div>
<div id="contentWrapper">
  <div class="content">
    Tested successfully on:
    <ul>
      <li>IE 8.0.6001.18702IS</li>
      <li>Google Chrome 17.0.963.46 beta</li>
      <li>Opera 10.10</li>
      <li>Konqueror 4.7.4</li>
      <li>Safari 5.1.5</li>
      <li>Firefox 10.0</li>
    </ul>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
      ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
      augue duis dolore te feugait nulla facilisi.
    </p>
  </div>
</div>
13 голосов
/ 24 ноября 2011

Что вам нужно сделать, это добавить оболочку за пределы ваших divs.

Вот CSS: я называю мой класс 'main_body_container' 

.main_body_container {
    min-width: 1005px; /* your desired width */
    max-width: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}

Надеюсь, это поможет :)

Обновление

Создано перо для него, смотрите здесь

4 голосов
/ 12 июня 2011

Не слишком уверен, поможет ли это, но вы можете попробовать вместо этого изменить стили для упомянутых элементов: 

<div id="el1" style="position:fixed; left:-20px; top:0; background-color:yellow; z-index:-1">element</div>

<div id="el2" style="position:fixed; left:20px; top:0; background-color:yellow; z-index:-1">element</div>

Установив вместо этого фиксированную позицию, она «блокирует» указанные элементы вместо, пока остальная часть контента по-прежнему прокручивается.Конечно, это предполагает, что именно в этом случае остальная часть содержимого накладывается на z-index, чтобы быть поверх определенных элементов div.

Надеюсь, это поможет.

2 голосов
/ 12 июня 2011

Добавьте это в свой CSS: 

div {
overflow-x:hidden;
overflow-y:hidden;
}

Стили overflow-x и -y не распознаются IE.Так что, если вас интересует только Firefox 3, это будет нормально работать.В противном случае вы можете использовать некоторый JavaScript: 

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only
1 голос
/ 11 сентября 2015

поставить следующий стиль 

html {overflow-x:hidden;}

Я тестировал его на IE 8, FF и Chrome.

1 голос
/ 22 апреля 2015

Мне удалось решить эту проблему, изменив атрибут позиции элемента на fixed:

position: fixed;

Нет больше горизонтальной прокрутки, вызванной этим элементом, но все еще горизонтальная прокрутка, вызванная другимиэлементы.

...