控制滚动OnScroll以滑动

Question

我试图让这个 scrollleffect在网站上运行.当用户向下滚动时,它必须自动转到下一张幻灯片.当用户向上滚动时,它必须向后滑动一次.我onScroll在Jquery中使用了这个函数尝试了很多东西,但它们似乎都没有用.

我使用以下脚本来检查用户是向上还是向下滚动.

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 如果有人有这种功能的经验,那将非常有帮助.

Answer 1

即使没有发生滚动(相反),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在回调函数之前或之后插入代码,分别在滚动之前或之后执行它们.(Obs:为了安全起见,在一些浏览器中运行的小提琴iframe无法访问scrollTop,因此它top全局存储变量;但是,答案中显示的代码应该在独立页面中正常工作)

注意:在参考站点和我的示例中,中间单击和移动鼠标都会随意滚动.你可能想要防止这种情况,你的选择.尽管如此,更新的示例滚动到特定点,而不是像你在问题中建议的那样添加一些delta $('.slide').height().原因是考虑到不同幻灯片具有不同高度的可能性.此外,确切地知道您显示的幻灯片允许您正确设置位置的哈希值.

有关详细信息,请参阅此相关问题.