CSS 禁用滚动

Posted 2023-02-23

【中文标题】CSS 禁用滚动

【英文标题】：CSS Disabled scrolling

【发布时间】：2011-11-12 05:19:32

【问题描述】：

我在我们的一个网站上遇到了问题：

在 IE9 中页面有一个垂直滚动条，但是你不能使用鼠标滚轮、箭头键、pgup/pgdwn 来滚动。滚动的唯一方法是实际单击/按住并移动滚动条。

我从 css 中删除了以下内容：

    overflow-x: hidden;

然后滚动照常工作。有没有其他人遇到过这个？看起来很奇怪，因为 overflow-x 应该隐藏水平滚动条？为什么会影响垂直？

我已在测试页面上尝试过此操作，它按预期运行。所以它必须是事物的组合。

【问题讨论】：

"*I have tried this on a test page and it acts as expected. So it must be a combination of things." - 除非有人以前遇到过这种情况，否则我们需要一个重现问题的测试页面。您可以发布指向该站点的链接，或者自己获取页面的副本并将其匿名，并包含所有必需的 CSS（以及任何与问题相关的 javascript）并将其发布到 @987654321 @.

抱歉，我无权发布材料本身的链接（它们仅供订阅）。这主要是出于兴趣，因为我已经设法解决了这个问题，只是我不明白为什么修复工作。不幸的是，我不能简单地上传一个页面，因为它是电子学习系统的一部分。

【参考方案1】：

我使用 iFrame 从另一个页面插入内容，但上面提到的 CSS 没有按预期工作。即使我使用 html 5 Doctype，我也必须使用参数 scrolling="no"

【参考方案2】：

尝试使用以下代码 sn-p。这应该可以解决您的问题。

body, html  
    overflow-x: hidden; 
    overflow-y: auto;

【参考方案3】：

overflow-x: hidden; 会隐藏 x 轴上超出元素的任何东西，因此不需要水平滚动条并将其移除。

overflow-y: hidden; 会隐藏 y 轴上超出元素的任何东西，因此不需要垂直滚动条，它会被移除。

overflow: hidden; 将删除两个滚动条

【讨论】：

不是反过来吗？ overflow-y 控制垂直滚动条：jsfiddle.net/ddVTk