Question

我有一个HTML页面，其中有一个＆lt; div＆gt;包含比自身更宽的内容;使用“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>

提前感谢任何见解！

Answer 1

我认为没有任何“自然”的方法来阻止滚动，但你确实有一些使用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;
});

演示：http://jsfiddle.net/eHTVV/3/
视图外部的所有链接仍然可以选择，但您将无法看到它们，但我认为这是其他浏览器可能无论如何都可以采取行动。

选项＃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必须调整此属性
demo：http://jsfiddle.net/cwolves/eHTVV/5/

Answer 2

你能不能把所有内容都放在包含div中？

我用这种方式修复了滚动问题...替换它：

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

代表示例中的第16行。

有帮助吗？

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

2 个答案: