Question

我在网站上遇到问题。我在我的javascript中使用了以下行

$('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);

这是我的javascript函数

$(document).keydown(function(e){
    if (e.keyCode === 39) { 
        var $next, $selected = $(".current");
            $next = $selected.next('li').length ? $selected.next('li') : $first;
            $selected.removeClass("current");
            $next.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);
            showPage(parseInt($next.text())) 
    }
});


$(document).keydown(function(e){
    if (e.keyCode === 37) { 
            var $prev, $selected = $(".current");

            $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
            $selected.removeClass("current");
            $prev.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);
            showPage(parseInt($prev.text())) 

}
    });

因此，当我按向左或向右箭头时，它会动画并向上滚动到指定的div。但是当我尝试向下滚动时，窗户震动并且不让我向下滚动。我无法解决问题并使其更顺畅。

更新

这是我的webpage

Answer 1

听起来你想要一个简单的捕获，它会取消用户交互动画。这样的事情应该有效：

$(document).on("scroll mousedown DOMMouseScroll mousewheel keydown", function (e) {
    if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel") {
        $('html, body').stop();
    }
});

这是从相关问题修改而来的：let user scrolling stop jquery animation of scrolltop?

Answer 2

我认为您可以使用此代码创建

$('html, body').animate({scrollTop: $(".single-post-content").height()}, 800);

而不是 $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 1000);enter code here

滚动功能会在向下滚动时抖动网站

2 个答案: