CSS “overflow-x:hidden” 与浏览器 Ctrl+F 水平移出屏幕单词突出显示冲突

CSS "overflow-x:hidden" conflicts with browser Ctrl+F horizontal move off screen word highlight

本文关键字：屏幕 移出 水平 单词突 冲突 显示 Ctrl+F 浏览器 overflow-x hidden CSS      更新时间：2023-09-26

CSS Conflict 

html {overflow-x:hidden;}

跟
网页浏览器命令

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>

Overflow-x 和 overflow-y 总是有问题，即使在最新的浏览器中也是如此。两者都可以有"隐藏"，"可见"和"滚动条"（"自动"只是"可见"和"滚动条"的组合），因此是9种组合。

但在实践中，其中只有 5 个有效，我回答说：即使在最新的 Chrome 中！更糟糕的是：浏览器之间存在差异，这是哪 5 个......

有时（取决于您的实际问题）如果您将 overflow-x、overflow-y 和溢出组合在一起，则可以使用解决方法。有时一些JS欺骗是解决方案。不存在一般和美丽的解决方案。

Ctrl/F可能没有什么直接的事情要做，这是您问题的间接原因，因为当浏览器的搜索小部件出现时，页面的正文可能会调整大小。您也可以通过垂直调整浏览器窗口的大小来重现此问题。

相关文章：