我正在尝试制作this网站上的滚动效果。当用户向下滚动时,它必须自动转到下一张幻灯片。当用户向上滚动时,它必须向后退一张幻灯片。我在 Jquery 中使用 onScroll
函数尝试了很多方法,但似乎都不起作用。
我使用以下脚本来检查用户是否向上或向下滚动。
var lastScrollTop = 0;
var check = 1;
var scrollDirection = 'down';
var scrollBottom = $(window).scrollTop() + $(window).height();
$(window).scroll(function(event) {
slideHeight = $('.slide').height();
var st = $(this).scrollTop();
if (st > lastScrollTop){
scrollDirection = 'down';
if (check == 1){
$('body').scrollTo( {top:'0px', left:'100%'}, 800 );
check = 0;
}
} else {
scrollDirection = 'up';
}
lastScrollTop = st;
console.log('ScrollDirection: '+ scrollDirection);
});
我不会再进一步了。进行开发的(测试)网站是:http://bit.ly/RBcffY 如果有人有此类功能的经验,那将会非常有帮助。
最佳答案
jquery.mousewheel即使没有发生滚动,插件也可用于捕获鼠标滚轮(与 $.scroll
相反)。这样,您既可以检测鼠标滚轮已移动,又阻止发生滚动。然后您只需自己执行动画滚动即可。
var scrollingScreen = false;
$("body").mousewheel(function(event, delta) {
if ( !scrollingScreen ) {
scrollingScreen = true; // Throttles the call
var top = $("body").scrollTop() || // Chrome places overflow at body
$("html").scrollTop(); // Firefox places it at html
// Finds slide headers above/below the current scroll top
var candidates = $(".slide").filter(function() {
if ( delta < 0 )
return $(this).offset().top > top + 1;
else
return $(this).offset().top < top - 1;
});
// If one of more are found, updates top
if ( candidates.length > 0 ) {
if ( delta < 0 )
top = candidates.first().offset().top;
else if ( delta > 0 )
top = candidates.last().offset().top;
}
// Performs an animated scroll to the right place
$("html,body").animate({ scrollTop:top }, 800, "easeInOutQuint", function() {
scrollingScreen = false; // Releases the throttle
});
}
return false; // Prevents default scrolling
});
工作示例位于jsFiddle 。这与您展示的引用的行为非常一致,您可以根据需要添加额外的效果 - 通过在 animate 之前或回调函数中插入代码,在滚动之前或之后执行它们分别。 (观察:出于安全原因,在iframe
中运行的 fiddle 无法在某些浏览器中访问scrollTop
,因此它存储了top
变量全局;但是,答案中所示的代码应该在独立页面中正常工作)
注意:在引用站点和我的示例中,单击鼠标中键并随意移动鼠标滚动。你可能想阻止这种情况发生,也可能不想阻止,这取决于你的选择。尽管如此,更新后的示例会滚动到特定点,而不是像您在问题中建议的那样仅添加一些增量 - $('.slide').height()
。原因是考虑到不同幻灯片具有不同高度的可能性。此外,准确了解您正在显示哪张幻灯片可以让您正确设置位置的哈希值。
另请参阅this related question了解更多信息。
关于jquery - 控制滚动 OnScroll 滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12930769/