0

ページでこの手法を試しています。以前は正常に動作しているように見えましたが、現在 Chrome と Firefox では水平スクロール バーが表示されません (これは良いことです) が、2 本の指でスワイプすると水平スクロールが発生します (これは悪いことです)。

同じ動作を説明しているが、解決済みとマークされているこのバグ レポートを見つけました。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>

どんな助けでも大歓迎です。

EDIT：overflow-xをhtml要素に追加すると、水平スクロールが妨げられますが、他の表示エラーが発生することがあります（私が作成したより肉付けされたページでは、ドロップダウンメニューはオーバーフローyである必要がありますが、途切れ続けました）もの) スクロールバーが表示されない理由は説明されていませんが、スクロールは引き続き機能します。

4

1 に答える 1

1

私はこの質問がずっと前に尋ねられたことを知っていますが、これが誰かの役に立てば幸いです。次の例のように、overflow-x hidden スタイルも html タグに追加してみてください。

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