CSS“ overflow-x：hidden”与浏览器Ctrl + F横向移出屏幕文字突出显示冲突
[英]CSS “overflow-x:hidden” conflicts with browser Ctrl+F horizontal move off screen word highlight
问题描述
CSS Conflict 
CSS冲突
html {overflow-x:hidden;}
with 与
Web Browser Command Web浏览器命令
Ctrl + F or find() or keyword search
Problems: 问题：
Site is horizontal scroll design that jumps to previous(Left) or next(Right) to a predetermined width/step/section without a visible horizontal scroll bar. 站点是水平滚动设计，可在没有可见的水平滚动条的情况下跳到上一个（左）或下一个（右）到预定的宽度/步长/部分。
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;
}
};
When I invoke a Ctrl+F to find words, the page will not follow the highlighter off screen left or right. 当我调用Ctrl + F来查找单词时，该页面将不在屏幕的左侧或右侧跟随荧光笔。 Except when Overflow-x: visible and that only scrolls to the word not the entire screen width/step/section that the word is in. 除非Overflow-x: visible ，并且仅滚动到单词，而不滚动到单词所在的整个屏幕宽度/步长/部分。
-
Overflow-x:hidden;removes the browsers ability to scroll horizontally;取消浏览器水平滚动的能力； -
Overflow-x:visible;browsers only scrolls to word not next section when in horizontal overflow;当水平溢出时，浏览器仅滚动到单词而不是下一部分；
Can I follow the browser ctrl+f word highlighter feature at predetermined width steps/sections? 我可以按照预定宽度的步长/节遵循浏览器的ctrl + f单词突出显示功能吗？
Can I invoke the key-press when ctrl+f word highlighter moves off screen? Ctrl + F字高亮显示移出屏幕时，可以调用按键吗？
Is it possible to capture the highlighted word coordinates( x , y)? 是否可以捕获突出显示的单词坐标（x，y）？
Functioning Test Code: 功能测试代码：
<!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>
1 个解决方案
解决方案1
2 2013-11-15 20:29:22
Overflow-x and overflow-y had always problems, even in the newest browsers. 即使在最新的浏览器中，x溢出和y总是存在问题。 Both can have "hidden", "visible" and "scrollbar" ("auto" is only a combo of "visible" and "scrollbar"), which is thus 9 combinations. 两者都可以具有“隐藏”，“可见”和“滚动条”（“自动”只是“可见”和“滚动条”的组合），因此是9个组合。
But in the practice only 5 of them works, I reply: even in the newest Chrome! 但实际上，我只能回答其中的5种：即使在最新的Chrome中！ And what yet worser is: there is a difference between the browsers, which 5 is this... 更糟糕的是：浏览器之间存在差异，这是5个...
Sometimes (in depends on your actual problem) a workaround is possible, if you combine overflow-x, overflow-y and overflow. 如果结合使用overflow-x，overflow-y和overflow，有时（取决于您的实际问题）可以解决。 Sometimes some JS-tricking is the solution. 有时，一些JS-triking是解决方案。 General and beautiful solution doesn't exist. 不存在通用且美观的解决方案。
ctrl/f has with it probably nothing direct to do, it is an indirect cause of your problem, because the body of your page will be probably resized, when the search-widget of the browser appears. ctrl / f可能与它没有直接关系，这是造成问题的间接原因，因为当浏览器的搜索部件出现时，页面的主体可能会调整大小。 You could reproduce this problem probably with a vertical resize of the browser window, too. 您也可以通过垂直调整浏览器窗口的大小来重现此问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.