Question

我在网页上尝试this technique。以前使用它似乎工作正常，但现在在Chrome和Firefox中，没有显示水平滚动条（这很好），但水平滚动仍然发生在双指滑动（这是坏的）。

我发现this bug report描述了相同的行为，但标记为已解决。我在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元素确实会阻止水平滚动，但有时会导致其他显示错误（在我制作的更加丰富的页面上，下拉菜单会被切断，即使这应该是溢出的东西）并没有解释为什么滚动条不存在，但滚动仍然有效。

Answer 1

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

html, body{
    overflow-x:hidden;
}

溢出-x bug？全浏览器宽度条技术

1 个答案: