避免在IE中通过键盘导航触发不需要的滚动？

我有一个HTML页面，其中有一个< div>，其中包含比本身更宽的内容; “溢出：隐藏”的样式使多余部分不可见。避免在IE中通过键盘导航触发不需要的滚动？

这个内容可以有链接。在IE8（但不是Firefox 3.6）中，如果您使用键盘（即Tab键）将焦点设置为右侧边缘处的链接，则IE会将整个div向左滚动足够多，以使整个链接可见。（同样的事情发生在左边的链接获得焦点时，如果div已经被向左滚动 - 它会滚动内容以使整个链接可见）。

我可以尝试隐藏这种不需要的滚动通过设置div的scrollLeft值，当它离开重击--jQuery使这很容易。但是，如果可能的话，我宁愿使用样式或设置来首先防止滚动。如前所述，Firefox在获得焦点时不会将部分剪切的链接滚动到视图中。理想情况下，应该使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>

在此先感谢您的任何见解！

来源

2011-01-11 Paul

这与[我刚刚问过的问题]非常相似（http://stackoverflow.com/q/13827409/925897）。 – brentonstrine 2012-12-11 20:10:12

你能不能适应包含div的所有内容？在你的榜样线16

 <div style="width: 400px; text-align: right;">

：

我固定的滚动问题呀......这个替代。

这有帮助吗？

来源

2011-01-13 02:18:50 SamStar

感谢您的回答！事实上，你的建议会解决这个例子，但这只是一个例子来说明我所看到的问题（并向我自己证明这实际上是浏览器的问题，而不是我的页面）。有问题的实际页面有两个完整的内容页面，jQuery动画可以从一个平滑过渡到另一个，以及一些链接，这些链接部分在边缘显示，并在悬停或焦点上以全景形式生成动画。在Firefox中很好地工作...但IE浏览器无法如上所述滚动。有什么办法可以阻止它吗？ – Paul 2011-01-13 04:55:45

我不认为有任何的“自然”的方式，以防止滚动，但你使用JS有几个选项：

选项＃1

检查，看是否链接在聚焦事件中出现。
如果它不在视图中，或者只是模糊它，或者最好找到下一个有效的链接并关注它。演示：http://jsfiddle.net/cwolves/eHTVV/2/
如果您的链接部分可见，这将显得很奇怪，因为它们将无法选择。

选项＃2

重置在比与jQuery滚动其他所有情况下容器div的onscroll事件的滚动位置。

您需要将存储在jQuery的动画事件的正确滚动位置的变量，例如：

var correctXOffset = 0; 
myDiv.animate({ left: 500 }, function(){ 
    correctXOffset = this.offsetLeft; 
});

演示：
视图以外的所有链接依然会选择，但你将无法看到它们，但我想这就是其他浏览器无论如何可能行事的方式。

选项＃3

取下标签，索引顺序无形的链接，只要您的div完成滚动，如：

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/

来源

2011-06-10 03:32:04

避免在IE中通过键盘导航触发不需要的滚动？

回答

相关问题