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

Question

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

Pau*_*aul 3 html css internet-explorer-8

我有一个HTML页面,其中有一个<div>,其中包含比自身更宽的内容; 使用"overflow:hidden;"样式使多余部分不可见.

此内容中可以包含链接.在IE8(但不是Firefox 3.6)中,如果您使用键盘(即Tab键)将焦点设置为在右边缘剪切的链接,IE将向左滚动整个div以使整个链接可见.(同样的事情发生在左边的链接获得焦点时,如果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>

Run Code Online (Sandbox Code Playgroud)

提前感谢任何见解!

Answer 1

Mar*_*ahn 6

我不认为有任何"自然"的方法来阻止滚动,但你确实有一些使用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;
});
```
Run Code Online (Sandbox Code Playgroud)
演示:http://jsfiddle.net/eHTVV/3/
视图外部的所有链接仍然是可选的,但您将无法看到它们,但我认为这是其他浏览器可能无论如何都可以执行的操作.

选项#3

每当div完成滚动时,从tab-index顺序中删除不可见的链接,例如:

myDiv.animate({ left : 500 }, function(){
    $('.invisiblePage a').prop('tabIndex', -1);
    $('.visiblePage a'  ).removeProp('tabIndex');
});

Run Code Online (Sandbox Code Playgroud)

与选项#1一样,链接将变为不可选择

选项#4

使用CSS"剪辑"内容: clip : rect(0px 400px 400px 0px);
容器必须绝对定位
有点复杂的JS必须调整这个属性
演示:http://jsfiddle.net/cwolves/eHTVV/5/

归档时间：	15 年，1 月前
查看次数：	3008 次
最近记录：	14 年，8 月前