Question

我正试图建立一个礼貌的＆＃34;滚动捕捉。您可能熟悉 ~~parallax~~ 滚动，这有时会将面板锁定到浏览器的窗口中 - 这使您感觉自己正在使用滚动条进行操作。 Apple的网站过去常常使用它。这是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表示块之间的中间值）。希望这会有所帮助。

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

}）;

创造一个＆＃34;礼貌＆＃34;在jQuery中滚动捕捉

1 个答案: