避免在IE中通过键盘导航触发的不必要的滚动？ [英] Avoid unwanted scrolling triggered by keyboard navigation in IE?
问题描述
我有一个HTML网页，其中有一个< div>包含比自身宽的内容;使用overflow：hidden;样式使超出部分不可见。
I have an HTML page in which there is a <div> that contains content that is wider than itself; the excess is made invisible with the style "overflow: hidden;".
此内容中可能包含链接。在IE8（但不是Firefox 3.6）中，如果使用键盘（即tab键）将焦点设置为在右边缘剪切的链接，IE将滚动整个div向左移动足够大，以使整个链接可见。 （同样的事情发生在左边的链接，当他们获得焦点，如果div已经向左滚动 - 它滚动内容右，使整个链接可见。）
There can be links in this content. In IE8 (but not Firefox 3.6), if you use the keyboard (i.e., tab key) to set focus to a link that is clipped at the right edge, IE will scroll the entire div left far enough to make the whole link visible. (The same thing happens with links on the left when they get focus, if the div has already been scrolled left -- it scrolls the contents right to make the entire link visible.)
我可以尝试隐藏这个不需要的滚动通过设置scrollLeft值的div时，当它失去了 - jQuery使这很容易。但我更喜欢，如果可能，使用样式或设置，以防止滚动在第一位。如上所述，当它获取焦点时，Firefox不会将部分剪切的链接滚动到视图中。理想情况下，应使IE的行为方式相同。
I can attempt to hide this undesired scrolling by setting the scrollLeft value on the div when it gets out of whack -- jQuery makes this easy. But I would prefer, if possible, to use a style or setting to prevent the scrolling in the first place. As mentioned, Firefox doesn't scroll a partially clipped link into view when it gets focus. Ideally, IE should be made to behave the same way.
下面的示例HTML。在IE中，使用Tab（或Shift + Tab）依次为每个链接设置焦点，以查看框内容是否向侧边移动。
Sample HTML below. In IE, use Tab (or Shift+Tab) to set focus to each link in turn to see the contents of the box shift sideways.
<!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：
I don't think there's any "natural" way to prevent the scrolling, but you do have a few options using JS:
选项＃1
- 检查链接是否在onfocus事件中无法查看。
- 如果它不在视图中，则只是模糊它，或者最好找到下一个有效的链接并将其聚焦。演示： http://jsfiddle.net/cwolves/eHTVV/2/
- 如果您的链接部分可见，这将会很奇怪，因为它们是不可选择的。
选项＃2
- 在除了使用jQuery滚动之外的所有情况下，重置容器div的onscroll事件中的滚动位置。
-
您需要存储一个在jquery动画事件中具有正确滚动位置的变量，例如：
- reset the scroll position in the onscroll event of the container div in all situations other than scrolling with jQuery.
You will need to store a variable that has the correct scroll position in the jquery animation events, e.g.:
var correctXOffset = 0;
myDiv.animate({ left: 500 }, function(){
correctXOffset = this.offsetLeft;
});
演示：http://jsfiddle.net/eHTVV/3/
选项＃3
-
当您的div完成滚动时，从标签索引顺序中删除不可见链接，例如：
Remove the invisible links from the tab-index order whenever your div is done scrolling, e.g.:
myDiv.animate({ left : 500 }, function(){
$('.invisiblePage a').prop('tabIndex', -1);
$('.visiblePage a' ).removeProp('tabIndex');
});
与选项＃1一样，链接将无法选择
Like option #1, links will become un-selectable
选项＃4
- 使用CSS剪辑内容：
clip：rect（0px 400px 400px 0px）; - 必须定位 $ / $>
- http://jsfiddle.net/cwolves/eHTVV/5/
- "Clip" the content using CSS:
clip : rect(0px 400px 400px 0px); - The container must be positioned absolutely
- somewhat complicated JS has to adjust this property
- demo: http://jsfiddle.net/cwolves/eHTVV/5/
这篇关于避免在IE中通过键盘导航触发的不必要的滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
