Overflow-x: скрытый все еще может прокручиваться

Проблема заключается в следующем:

У меня есть меню ширины ширины, которое создается путем создания большого поля справа и слева. Это поле должно быть обрезано overflow-x: hidden, и это... нет полос прокрутки, все (визуально) нормально...

Но если вы перетащите страницу (используя Mac Lion) или прокрутите вправо, на странице появится огромный батон, который должен был обрезаться с помощью overflow-x:hidden.

CSS

html {
  margin:0;
  padding:0;
  overflow-x:hidden;
}
body {
  margin: 0 auto;
  width: 950px;
}

.full, .f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}

.full, .f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}

Вот ссылка: http://jsfiddle.net/NicosKaralis/PcLed/1/

Вам нужно открыть в черновике, чтобы увидеть... jsfiddle css каким-то образом заставляет его работать.

@Krazer

У меня есть и структура такая:

body
  div#container
    div#menu_bar
      div#links
      div#full_bar
    div#content_body
    ...

#container представляет собой центрированный div и имеет фиксированную ширину 950px, #full_bar - это панель, которая распространяется на все окно, с одной стороны на другую

если я ставлю ширину 100% в #full_bar, он получит только внутреннюю ширину, а не ширину окна

Ответы

Ответ 1

Я не думаю, что есть способ предотвратить прокрутку элемента без использования JavaScript. С JS, однако, довольно легко установить scrollLeft в 0 onscroll.

Ответ 2

У меня была такая же проблема. Я решил это, положив overflow-x: hidden; на и body и html.

html {
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
}
body {
  margin: 0 auto;
  overflow-x: hidden;
  width: 950px;
}
.full {
  background: red;
  color: white;
}
.full,
.f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}
.full,
.f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}
<div>
  <div class="full">
    abc
  </div>
</div>

Ответ 3

Есть еще один способ исправить эту проблему с помощью одной строки кода:

body {
    /* All your regular code including overflow-x: hidden; */
    position:relative;
}

Это решило мои проблемы на webkit (Mac)

Ссылка: http://www.tonylea.com/2010/safari-overflow-hidden-problem/

Ответ 4

html, body { overflow-x: hidden; width: 100%; }

Решил проблему для меня, за исключением IE - вы можете перетащить сайт вправо, если приложите все усилия для этого.

Использование overflow: hidden; удаляет вертикальную полосу прокрутки, поэтому это не решение.

Мне не удалось найти лучшее решение с использованием JavaScript.

Ответ 5

Я нашел решение здесь fooobar.com/questions/150726/...

У вас есть, чтобы разместить #wrapper вокруг вашего контента. overflow:hidden на body не будет работать.

#wrapper {position: absolute; width: 100%; overflow-x: hidden}

И вот HTML:

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="wrapper">
      <div class="yourContent"> ... </div>
    </div>
  </body>
</html>

Ответ 6

От Weaver Offcanvas demo http://jasonweaver.name/lab/offcanvas/

Оберните содержимое с помощью

width: 100%; 
overflow: hidden;

Это ограничивает только ширину и работает в аналогичных случаях, также предотвращает прокрутку при перетаскивании.

Ответ 7

Попробуйте элемент html фиксированной позиции, но это отключить прокрутку в обоих направлениях.

html {
    position: fixed;
}

Ответ 8

Для меня также работало переполнение как тегов <body>, так и <html>.

Ответ 9

Как установить ширину в теле содержимого и деформировать #container вокруг #menu_bar и #content_body?

body
    div#container 
       div#menu_bar (absolute positioned)
          div#links
          div#full_bar
       div#content_body (relative positioned + padding [#menu_bar height])
          ...

Пример CSS.

Ответ 10

Рассмотрим использование max-width для html.

держи меня в курсе, если он не работает.