Question

关注隐形元素时遇到问题。标记：

<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;}

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

来自DOM或其他任何地方的浏览器是否有任何变化？我知道滚动焦点是默认的浏览器功能，所以我不打算与浏览器对抗，我很确定我不能禁用这种滚动。

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

Answer 1

为什么不多用一点JS？我已经将你的JSfiddle分叉以使用原始JS，尽管我会使用jQuery来使它更清晰。

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

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

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

Answer 2

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

在浏览器之前滚动不可见元素

2 个答案: