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

У меня есть абсолютно позиционированный элемент, который является "вне" страницы, но я хочу, чтобы браузеры (я использую Firefox 3) не отображали горизонтальные полосы прокрутки. Кажется, что отображение div, расположенного слева (например, имеющего "left: -20px" ), в порядке, и ни одна полоса прокрутки не отображается. Однако одно и то же справа (справа: -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>

Ответы

Ответ 1

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

Ответ 2

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

  • Создайте div со скрытым переполнением, который абсолютно расположен в верхнем левом углу страницы. Сделать ширину и высоту 100%
  • Создайте еще один 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>

Ответ 3

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

Вот 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

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

<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.

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

Ответ 5

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

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

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

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no";    // ie only

Ответ 6

Поместите следующий стиль

html {overflow-x:hidden;}

Ответ 7

Я смог решить эту проблему, изменив атрибут позиции элемента на фиксированный:

положение: фиксированный;

Более горизонтальная прокрутка, вызванная этим элементом, но все же горизонтальная прокрутка, вызванная другими элементами.