0

我在关注不可见元素时遇到了问题。标记：

<div id="outer">
    <div id="inner" style="top: 0;">
        <div class="group" style="background: red;"><a href="#">X</a></div>
        <div class="group" style="background: blue;"><a href="#">Y</a></div>
        <div class="group" style="background: green;"><a href="#">Z</a></div>
    </div>
</div>

<button onclick="document.getElementById('inner').style.top = '-182px';">Down</button>

和CSS：

#outer {
    width: 300px;
    height: 182px;
    overflow: hidden;
    background: black;
}
#inner { position: relative; }
.group { width: 300px; height: 182px; background: red;}

当我按下“向下”按钮时，内部的样式变为“顶部：-182px”，这在功能上只是显示另一组项目。组件基本上用作垂直组滑块。在我使用“Tab”之前，一切都运行良好。就在滑块显示下一个组之前，浏览器会自动移动内部 div，而不更改其上的任何属性。

浏览器从 DOM 或其他任何地方进行偏移是否有任何更改？我知道焦点滚动是默认的浏览器功能，所以我不会与浏览器对抗，我很确定我不能禁用这种滚动。

我发现浏览器会在任何 js 代码执行之前滚动。有没有办法在浏览器之前拦截焦点事件和滚动？

4

2 回答 2

0

为什么不使用更多的 JS？我已经分叉了你的 JSfiddle 以使用原始 JS，尽管我会使用 jQuery 让它更干净。

http://jsfiddle.net/bldoron/wMXpt/4/

基本上我会遍历元素并显式隐藏不相关的元素，而不是使用 css 规则隐式隐藏。

您需要检查我们是否通过了最后一个节点，但您得到了图片。

于 2012-08-31T15:08:40.803 回答
0

看看这个：http: //jsfiddle.net/byTLg/8/。有用！小提琴会比我解释得更多）

于 2012-08-31T16:38:41.320 回答