logo标签列表

当overflow-x被隐藏时，是否可能仅防止水平滚动？

javascriptcssoverflowhidden
8
我有一个网页，其内容超出了浏览器窗口的右侧。我在<body>上设置了overflow-x: hidden以关闭底部滚动条，但我仍然可以使用触控板水平滚动，这不是我想要的。
有没有办法防止浏览器水平滚动？
顺带一提：Safari 4.0.4有时只会水平滚动，而且滚动感觉“黏滞”和“跳跃”，而Firefox总是平稳地水平滚动。
6个回答
5

你可以尝试在CSS中设置：

html{
  overflow-x: hidden;
}

使用 body 选择器的替代方法。 我尝试了这种方法，在火狐浏览器中可以正常工作。

我也在FF中尝试了这个，它似乎有完全相同的问题。更好的解决方案是，如@Chaulky所指出的那样，将显示设置为“none”。如果你想让它再次出现，可以使用一些js / jquery来移动它。 - Automatico
3
我认为真正的问题是，为什么您的内容会超出页面的预定大小？这些内容是您不希望用户实际看到的吗？如果是这样，请将它放在某个 div 中，并将其显示设置为 none。这样就可以完全避免溢出问题。
如果您有合理的理由想让它溢出容器，请显式地设置容器的大小，然后将 overflow-x 设置为 hidden。我没有测试过，但这应该可以防止当前行为。如果不行，请尝试使用 div 而不是 body 标签。浏览器可能会因为它正在处理 body 标签本身而表现奇怪。
2

我会进入Chrome浏览器，在桌面上打开开发者工具。删除overflow-x属性。然后继续删除页面上的每个父元素。当您看到水平滚动条消失时，就知道找到了问题所在。然后深入探究该元素。我的猜测是您将宽度设置为100%，然后加上了边距。如果是这种情况，请删除边距。

1
如果其他方法都失败了，你可以使用JavaScript来不断强制浏览器向左滚动，使用window.scrollTo(xpos, ypos)。对于xpos，您将要使用0，而对于ypos，您将要获取用户当前的滚动位置，假设您想允许垂直滚动。
您可以将函数调用放在window.onscroll事件处理程序中，或者放在每100毫秒运行一次的javascript间隔中。由您决定。如果您需要代码示例，请告诉我。
为了防止滚动，可以使用overflow: hidden、window.onscroll和window.scrollTo的组合来隐藏滚动条，并在滚动时将用户定向到0,0（屏幕左上角），从而有效地保持网页在其当前位置（或ypos作为用户当前滚动位置以保留垂直滚动，如@InvisibleBacon所建议的）。 - Seagrass
0

如果你有一个例子的话，理解起来会更好。

这是一个很长的URL还是没有空格的东西？你在元素上设置了white-space:nowrap;吗？

如果你有一个定义了大小的容器（适合视口），文本应该正确地粘附在一起（除非它是一行没有空格的长文本）。

0

虽然这是一篇旧的讨论，但对于寻找正确答案的人可能仍有用处！

在超出浏览器窗口宽度的元素的父级div上设置“overflow:hidden”（不是像通常情况下所做的html或body），这将停止使用滚动条或箭头键进行滚动...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接