javascript - 如何在焦点更改时停止浏览器自动滚动容器

Question

当您在浏览器中的输入字段之间切换时，浏览器将自动滚动最近的父容器以将下一个焦点字段放置在 View 中。

简单的 JSFiddle:http://jsfiddle.net/TrueBlueAussie/pxyXZ/1/

$('.section').eq(6).find('input').focus();

例如，如果您打开上面的 fiddle ，它会在黄色窗口的底部选择“Sample item 7”。如果您按 Tab 键，“示例文本 8”字段会跳到父窗口的中间。

显然这对于​​普通网站来说是一件好事，但我有一个自定义滚动容器，我可以在其中手动定位和滚动所有内容。我正在跟踪焦点变化并将使用动量滚动条将其显示在 View 中，但是如何禁用网络浏览器的默认滚动行为？乐于接受 CSS、Javascript 或 JQuery 解决方案。 p>

Answer 1

这只是根据我上面的评论即兴创作:

$('input').on('keyup',function(e){
    if(e.keyCode === 9) {
        var $this = $(this);

        // (do your scroll thing here
        // ..., function(){
            $this.parent().next().find('input').focus();
        // });
    }
});

只要回调时间正确，这只会在您滚动后改变焦点。您需要使用自己的魔法来确定要滚动到的内容，但这应该会为您提供所需的焦点行为。