javascript - 在 jQuery 中创建 "polite"滚动捕捉

Question

我正在尝试构建一个“礼貌”的滚动快照。您可能熟悉 视差 滚动，它有时会将面板锁定在浏览器窗口中 - 这会让您感觉您正在与滚动条作斗争。苹果的网站曾经使用过它。这是一个good example .

我想要做的是对鼠标移动进行一些检测 - 因此如果鼠标 3 秒没有移动，那么滚动会将其移动到正确的位置。我发现了一些 jQuery 的简短片段，但我正在努力将它们拼凑在一起以使其正常工作。因为我正在努力学习，这是一个挑战，我只需要有人引导我走向正确的方向......

JSFiddle

var timeout = null;

$(window).on('mousemove', function() {

$(function(){
var _top = $(window).scrollTop();
var individualDivHeight = 300;

$(window).scroll(function() {
    var _cur_top = $(window).scrollTop();
    var totalHeight = $('#container').height();
    var posToScroll = Math.round(_cur_top / individualDivHeight) *    individualDivHeight;
}); 
});


if (timeout !== null) {
    clearTimeout(timeout);
}

timeout = setTimeout(function() {
    $('html, body').stop().animate({scrollTop: posToScroll}, 200);
}, 3000);
});

Answer 1

我已经调整了你的jsFiddle 。当您移动鼠标时，计数器会重新启动。

编辑:

如果您保持空闲 3 秒，则页面将滚动到当前框的顶部或当前框的末尾，具体取决于阈值和scrollTop 值(0.5 表示 block 之间的中间) 。希望这会有所帮助。

var timeout = null;
var threshold=0.5;
$(window).on('mousemove', function() {
    if(timeout)clearTimeout(timeout);
    timeout=setTimeout(function(){
        var _top = $(window).scrollTop();
        $('.box').each(function(){
            var $this=$(this);
            var boxHeight = this.offsetHeight;
            var boxTop=this.offsetTop;
            if(_top<boxTop)return;
            if(_top<boxTop+(boxHeight*threshold)) {
                // Go back to the top of the current block
                $('html, body').stop().animate({scrollTop: boxTop}, 200);
            }
            else {
                // Go forward to the end of the current block
                $('html, body').stop().animate({scrollTop: boxTop+boxHeight}, 200);
            }
        });
},3000);

});