Und*_*ood 8 html javascript css cross-browser event-listener
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>
溢出-x 和溢出-y 总是存在问题，即使在最新的浏览器中也是如此。两者都可以有“隐藏”、“可见”和“滚动条”（“自动”只是“可见”和“滚动条”的组合），因此有 9 种组合。
但在实践中只有 5 个有效，我回答：即使在最新的 Chrome 中也是如此！更糟糕的是：浏览器之间存在差异，这是 5 个......
有时（取决于您的实际问题）如果将溢出 x、溢出 y 和溢出结合起来，则可以使用解决方法。有时一些 JS 欺骗就是解决方案。通用且美观的解决方案不存在。
ctrl/f 可能与它没有直接关系，它是导致问题的间接原因，因为当浏览器的搜索小部件出现时，页面正文可能会调整大小。您也可以通过垂直调整浏览器窗口的大小来重现此问题。