0

我正在页面上尝试这种技术。以前用过它似乎工作正常，但现在在 Chrome 和 Firefox 中，不显示水平滚动条（这很好），但两指滑动时仍然发生水平滚动（这很糟糕）。

我发现这个错误报告描述了相同的行为，但被标记为已解决。我在 Safari 中测试过，水平滚动被阻止了。

代码（实际上与 CSS-Tricks 示例中的代码相同）：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
overflow-x: hidden;
}
h1 {
position: relative;
background: hsla(0,0%,0%,0.8);
color: white;
width: 90%;
margin: 0 auto;
}
h1:before, h1:after {
content: "";
position: absolute;
background: hsla(0,0%,0%,0.8);
top: 0;
bottom: 0;
width: 9999px;
}
h1:before {
right: 100%; 
}
h1:after {
left: 100%;
}
</style>
</head>
<body>
<h1>Title of Page with full browser width bars</h1>
</body>
</html>

非常感谢任何帮助。

编辑：在 html 元素中添加 overflow-x 确实可以防止水平滚动，但有时会导致其他显示错误（在我制作的更充实的页面上，下拉菜单一直被切断，即使这应该是一个溢出-y事情）并且没有解释为什么滚动条不存在，但滚动仍然有效。

4

1 回答 1

1

我知道很久以前有人问过这个问题，但希望这对某人有所帮助。尝试将 overflow-x 隐藏样式也添加到 html 标记中，例如：

html, body{
    overflow-x:hidden;
}
于 2014-10-13T00:53:10.583 回答