我有一个 HTML 页面，其中有一个
包含比它本身更宽的内容；使用“溢出:隐藏；”样式使多余部分不可见。
此内容中可以有链接。在 IE8(但不是 Firefox 3.6)中，如果您使用键盘(即 Tab 键)将焦点设置到在右边缘被剪切的链接，IE 将向左滚动整个 div 足够远以使整个链接可见。 (如果 div 已经向左滚动，当它们获得焦点时，左边的链接也会发生同样的事情——它会向右滚动内容以使整个链接可见。)
我可以尝试通过在 div 脱离正常运行时设置 scrollLeft 值来隐藏这种不需要的滚动——jQuery 使这变得很容易。但如果可能的话，我更愿意首先使用一种样式或设置来防止滚动。如前所述，Firefox 在获得焦点时不会将部分剪切的链接滚动到 View 中。理想情况下，IE 应该以相同的方式运行。
下面的示例 HTML。在 IE 中，使用 Tab(或 Shift+Tab)将焦点依次设置到每个链接上，以横向移动查看框的内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo of undesired scrolling</title>
</head>
<body>
<a href="http://www.w3.org">Before</a>
<div style="width: 400px; border: 1px solid gray; overflow: hidden;">
<div>
<div style="width: 450px; text-align: center;">
<a href="http://www.w3.org">Somewhere in the middle</a>
</div>
<div style="width: 450px; text-align: left;">
<a href="http://www.w3.org">Over on the left</a>
</div>
<div style="width: 450px; text-align: right;">
<a href="http://www.w3.org">Over on the right</a>
</div>
</div>
</div>
<a href="http://www.w3.org">After</a>
</body>
</html>
提前感谢您的任何见解!
最佳答案
我不认为有任何“自然”的方式来阻止滚动，但您确实有一些使用 JS 的选项:
选项#1
- 检查链接是否在 onfocus 事件中不可见。
- 如果它不在视野范围内，要么模糊它，要么最好找到下一个有效链接并将其聚焦。演示:http://jsfiddle.net/cwolves/eHTVV/2/
- 如果您的链接是部分可见的，这会很奇怪，因为它们将无法选择。
选项#2
- 在除使用 jQuery 滚动之外的所有情况下，在容器 div 的 onscroll 事件中重置滚动位置。
您需要在 jquery 动画事件中存储一个具有正确滚动位置的变量，例如:
var correctXOffset = 0; myDiv.animate({ left: 500 }, function(){ correctXOffset = this.offsetLeft; });- View 外的所有链接仍然可以选择，但您将看不到它们，但我想这可能是其他浏览器的行为方式。
选项#3
每当您的 div 完成滚动时，从 tab-index 顺序中删除不可见的链接，例如:
myDiv.animate({ left : 500 }, function(){ $('.invisiblePage a').prop('tabIndex', -1); $('.visiblePage a' ).removeProp('tabIndex'); });与选项 #1 一样，链接将变得不可选择
选项#4
- 使用 CSS“剪辑”内容:
clip : rect(0px 400px 400px 0px); - 容器必须绝对定位
- 有些复杂的JS要调整这个属性
- 演示:http://jsfiddle.net/cwolves/eHTVV/5/
关于html - 避免在 IE 中由键盘导航触发不必要的滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4653331/