Question

我正在使用名为Waypoints的jQuery插件使用滚动操作。

我想要实现的是将焦点设置在视口中的部分的第一个输入元素上，并在向下滚动时将焦点移动到下一个相应部分的输入。并且，当向上滚动回到上面的第一部分时，它应该将焦点设置回第一部分的输入。

以下是我在使用上述插件的实际工作设置上的内容。不幸的是，我无法在我的JS Fiddle中启动并运行插件。

此代码块适用于在页面加载时设置焦点并在向下滚动时将焦点更改为目标输入但滚动回到顶部不会将焦点设置回来。

(function($) {

var firstInput = $('section').find('input[type=text]').filter(':visible:first');

if (firstInput != null) {
    firstInput.focus();
}

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
});

$('section').waypoint(function () {
    var getFocus = $(this).find('input[type=text]').filter(':visible:first');
    getFocus.focus();
}, {
    offset: function () {
        return -$(this).height();
    }
});

});

这是我的JS Fiddle 那个没有插件的部分。

只要有人能解释如何在普通的jQuery中完成它们如果不熟悉这个插件。

Answer 1

jQuery Waypoints非常简单易用。我没有尝试过你的代码，但我完成了这个：

$('input:first').focus();

$('section').waypoint(function() {
    $(this).find('input:first').focus();
});

请参阅此fiddle。

然而，在向下滚动时使用鼠标滚轮，滚动有时会在中间部分跳回。它可能是浏览器对输入焦点的反应。我没有浏览整个文档，但没有输入焦点的例子。

如果你只是想做这个简单的任务，我建议你放弃插件。我可以告诉你如何用jQuery完成这个。

您可以使用jQuery的scroll()函数处理滚动。您需要在滚动事件中获取scrollTop()，然后将其与<input>的顶部offset()进行比较。

$(window).scroll(function(){
    var st = $(this).scrollTop();
    $('input[type=text]').each(function(){
        var offset = $(this).offset();

        if(st >= offset.top -20 && st < offset.top + $(this).height()){
            $(this).focus();  
        } 
    });  
});

这是fiddle。

jQuery - 滚动命中某个元素时自动输入焦点

1 个答案: