8

CSS の競合 

html {overflow-x:hidden;}

Web ブラウザ コマンドで 

Ctrl + F  or find() or keyword search


問題:

サイトは、横スクロール バーが表示されずに、所定の幅/ステップ/セクションに前 (左) または次 (右) にジャンプする横スクロール デザインです。

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
    case 37:
        leftArrowPressed();
        window.location.href = '#one';
        break;
    case 39:
        rightArrowPressed();
        window.location.href = '#two';
        break;
}
};


単語を検索するために Ctrl+F を呼び出すと、ページは画面の左右に蛍光ペンをたどりません。Overflow-x: visible単語が含まれる画面幅/ステップ/セクション全体ではなく、単語にのみスクロールする場合を除きます。

  • Overflow-x:hidden;ブラウザの水平スクロール機能を削除します。
  • Overflow-x:visible;ブラウザは、水平方向のオーバーフロー時に次のセクションではなく単語にのみスクロールします。


所定の幅のステップ/セクションで、ブラウザーの ctrl+f 単語ハイライター機能を使用できますか?

ctrl+f 単語蛍光ペンが画面外に移動したときにキープレスを呼び出すことはできますか?

強調表示された単語の座標 ( x 、 y) をキャプチャすることは可能ですか?

機能テストコード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Alpha Test</title>

<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:hidden;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:200%;
}
#one, #two {
width:50%;
float:left;
}
</style>

<script type="text/javascript">
document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            window.location.href = '#one';
            break;
        case 39:
            window.location.href = '#two';
            break;
    }
};
</script>

</head>
<body>

<div id="wrap">

<div id="one">
<iframe id="frame" src="https://wiki.videolan.org/" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

<div id="two">
<iframe id="frame" src="http://imdb.com" frameborder="0" marginwidth="" width="100%" height="100%" align="bottom">Browser not compatible.</iframe>
<!END URL-iFrame></div>

</div>
</body>
</html>
4

1 に答える 1

2

オーバーフロー x とオーバーフロー y には、最新のブラウザーでも常に問題がありました。どちらも「hidden」、「visible」、「scrollbar」(「auto」は「visible」と「scrollbar」の組み合わせのみ) を持つことができるため、9 つの組み合わせになります。

しかし、実際にはそのうちの 5 つしか機能しません。最新の Chrome でも! さらに悪いことに、ブラウザ間に違いがあります。

場合によっては（実際の問​​題によって異なりますが）、overflow-x、overflow-y、およびoverflowを組み合わせると、回避策が可能になります。場合によっては、JS トリックが解決策になることもあります。一般的で美しい解決策は存在しません。

ctrl/f にはおそらく直接的なことは何もありません。ブラウザの検索ウィジェットが表示されると、ページの本文のサイズが変更される可能性があるため、これは問題の間接的な原因です。おそらく、ブラウザ ウィンドウの垂直方向のサイズ変更でも、この問題を再現できます。

于 2013-11-15T20:29:22.643 に答える