Question

我的页面中有oveflow-x的问题。虽然身体有溢出-x隐藏，我仍然可以在页面上滚动。

 <html>
    <body>
       <div id="content">
          <div id="mydiv"></div>
       <div>
    </body> 
 </html>

html和body有overflow-x:hidden。 Div“content”在css中没有任何内容，div“myDiv”具有绝对位置。如何让“mydiv”不要离开页面？因为现在发生的事情是我仍然可以滚动x。

小提琴＆gt; http://jsfiddle.net/o7dph6sj

Answer 1

如果没有更多代码，我能想到的最佳答案是你的html和body标签没有任何宽度设置，因此它们继承了默认宽度100％。这意味着每个子元素都将在100％之内。

将主体设置为具有设定宽度，然后将溢出设置为隐藏，然后检查页面中的元素是否超出宽度。

示例：

body{
  width: 1024px;
  overflow-x: hidden;
}

此外，你在#content中设置的代码也可能直接影响它，一些元素将忽略它的父元素并在它们之外呈现，这使我们回到...给我们更多的代码。

Answer 2

因为您使用错误的选择器进行溢出。如果你想避免垂直滚动，你可以使用：

html, body {
    overflow-y: hidden;
}

避免 HORIZONTAL SCROLLING ：

html, body {
    overflow-x: hidden;
}

避免 BOTH

html, body {
    overflow: hidden;
}

看看your forked fiddle，我避免两个溢出轴，并且根本没有溢出

Answer 3

更改＆＃34;溢出-x：隐藏！重要;＆＃34;是

html, body {
    overflow: hidden !important;
}

或

html, body {
    overflow-y: hidden !important;
}

事实上你可以忽略＆＃34;！important＆＃34;因为您使用！important 来覆盖其他规则。在这里你只是使用了错误的属性＆＃34; overflow-x＆＃34;这是＆＃34;水平滚动＆＃34;

它有效!!!

这是工作小提琴＆gt; http://jsfiddle.net/o7dph6sj/1/

使用添加要求更新了答案：

您添加＆＃34; overflow: hidden＆＃34;如果你不想要两个卷轴，

AND＆＃34; overflow-y: hidden;＆＃34;隐藏水平滚动

AND＆＃34; overflow-x: hidden;＆＃34;隐藏垂直滚动

查看更新后的小提琴并通过评论和取消评论此代码来尝试：

html, body {
    overflow-y: hidden; /* Hides Horizontal Scroll*/
    /*overflow-x: hidden;*/ /* Hides Vertical Scroll*/
    /*overflow: hidden;*/ /* Hides Both Vertical and  Horizontal Scroll*/
}

更新了小提琴＆＃34; http://jsfiddle.net/o7dph6sj/3/＆＃34;

查看这些文章＆gt;

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

溢出-x：隐藏不起作用

3 个答案:

这是工作小提琴＆gt; http://jsfiddle.net/o7dph6sj/1/

更新了小提琴＆＃34; http://jsfiddle.net/o7dph6sj/3/＆＃34;

查看这些文章＆gt;