CSS“ overflow-x：hidden”與瀏覽器Ctrl + F橫向移出屏幕文字突出顯示沖突

Question

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>

Answer 1

即使在最新的瀏覽器中，x溢出和y總是存在問題。 兩者都可以具有“隱藏”，“可見”和“滾動條”（“自動”只是“可見”和“滾動條”的組合），因此是9個組合。

但實際上，我只能回答其中的5種：即使在最新的Chrome中！ 更糟糕的是：瀏覽器之間存在差異，這是5個...

如果結合使用overflow-x，overflow-y和overflow，有時（取決於您的實際問題）可以解決。 有時，一些JS-triking是解決方案。 不存在通用且美觀的解決方案。

ctrl / f可能與它沒有直接關系，這是造成問題的間接原因，因為當瀏覽器的搜索部件出現時，頁面的主體可能會調整大小。 您也可以通過垂直調整瀏覽器窗口的大小來重現此問題。

CSS“ overflow-x：hidden”與瀏覽器Ctrl + F橫向移出屏幕文字突出顯示沖突

問題描述

1 個解決方案

解決方案1
2 2013-11-15 20:29:22

CSS“ overflow-x：hidden”與瀏覽器Ctrl + F橫向移出屏幕文字突出顯示沖突

問題描述

1 個解決方案

解決方案1 2 2013-11-15 20:29:22

解決方案1
2 2013-11-15 20:29:22