scrollTop似乎不正确
scrollTop似乎不正确
提问于 2016-05-27 17:58:35
我想要写自定义滚动部分的功能。
当我加载页面并向下滚动时，它应该向下滚动窗口的高度，这是很好的。
然后，如果再次向下滚动，我想检查页面是否滚动超过窗口高度(应该是，如果向下滚动的话)，但是它似乎停留在第一个滚动之后的位置。
所以我可以从红色到黄色，而不是从黄色到绿色。
var winHeight = window.innerHeight;
$('div').each(function(){
$(this).css('height', winHeight);
});
function scrollSections() {
var windowHeight = window.innerHeight;
var scrollTop = $(window).scrollTop();
var pos = windowHeight;
if (scrollTop > windowHeight) {
pos = windowHeight * 2;
}
$('body, html').animate({scrollTop: pos}, 1000, function() {
});
}
$( window ).on( "scroll", function() {
scrollSections();
});回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-27 20:45:27
当您调用$('body, html').animate({scrollTop: pos}, ...);时，您将触发滚动事件，这些事件将再次运行您的处理程序，这将根据当前(非最终)滚动位置等再次启动动画。这会使发生的卷轴数量成倍增加:这不是你想要的。
相反，在您的事件处理程序中执行任何其他操作之前，请检查动画滚动是否正在进行，然后决定要做什么。例如，在这种情况下，您可以退出处理程序，这样动画就可以在不受干扰的情况下继续：
if ($('body, html').is(':animated')) return; // exit when animation ongoing另外，通过将滚动位置与前一个滚动位置进行比较，可以改进设置目标位置的公式。如果较高，则向下滚动一个“页面”，另一个“页面”向上滚动。为此，您应该将pos保持为全局变量，如下所示：
var pos = $(window).scrollTop();
function scrollSections() {
if ($('body, html').is(':animated')) return;
var windowHeight = window.innerHeight;
var scrollTop = $(window).scrollTop();
if (pos == scrollTop) return; // no change
// depending on scroll direction, go page up, down
pos += pos < scrollTop ? windowHeight : -windowHeight;
// round to nearest page boundary
pos = Math.round(pos / windowHeight) * windowHeight;
$('body, html').animate({scrollTop: pos}, 1000, function() {
});
}这些更改已应用于这把小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37489708
复制相关文章
相似问题
腾讯云开发者
