我正在页面上尝试这种技术。以前用过它，它似乎工作正常，但现在在 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>
任何帮助非常感谢。
编辑：将 overflow-x 添加到 html 元素确实会阻止水平滚动，但有时会导致其他显示错误（在我制作的更充实的页面上，下拉菜单不断被切断，即使这应该是一个溢出的东西）并且没有解释为什么滚动条不存在，但滚动仍然有效。
我知道
这个问题很久以前就被问过了，但希望这对某人有所帮助。尝试将 overflow-x 隐藏样式也添加到 html 标签中，例如：
html, body{
overflow-x:hidden;
}