javascript - 带有 native 滚动条的整页 slider

Question

我正在构建一个保留 native 滚动条并允许用户自由滚动、使用鼠标滚轮或导航点(左侧)切换到幻灯片的整页 slider 。

一旦用户在最后一张幻灯片上并尝试进一步向下滚动，整个 slider 将向上移动以显示一个简单的可滚动部分。如果用户向下滚动然后尝试返回，那么这个新部分会再次移开并将 slider 返回到 View 中。

fiddle :http://jsfiddle.net/3odc8zmx/

我遇到的问题:

1. 只有前两个导航点有效。如果您正在看第一张幻灯片，那么第三张确实有效。但是，如果您在幻灯片 2 上，则什么也不做。注意:紫色的是页面第二部分的快捷方式，与 slider 无关。
2. 当移动到最后一张幻灯片时(通过点，如果你在第一张幻灯片上)它会导致代码使整个 slider 向上移动，因为它看到用户已经按照上面的描述。我尝试使用一个名为 listen 的变量来解决这个问题，以在使用 showSlide 方法时停止监听滚动事件......但它似乎是真的，即使我将它设置为 false，并且只在动画之后再次将它重置为 true。 ..
3. 使用鼠标滚轮向下滚动时，我可以转到第二部分并返回，但不能转到前三部分。 我想知道我是否可以使用 showSlide 方法来更好地处理这个问题，而不是我已经实现的当前肮脏的 next 和 prev 函数。

注意:如果用户自由滚动，当他们使用鼠标滚轮时，我希望 slider 捕捉到最近的幻灯片以自行更正...关于如何执行此操作的任何建议？

谁能提供一些帮助？

这是 JS:

var listen = true;

function nextSlide()
{
    $('#section1').stop(true,false).animate({
        scrollTop: $('#section1').scrollTop() + $(window).height()
    });
}

function prevSlide()
{
    $('#section1').stop(true,false).animate({
        scrollTop: -$('#section1').scrollTop() + $(window).height()
    });
}

function showSlide(index)
{
    var offset = $('#section1 div').eq(index).offset();
        offset = offset.top;
    if(offset){
        listen = false;
        $('.slide-dot').removeClass('active');
        $('.slide-dot').eq(index).addClass('active');       
        $('#section1').stop(true,false).animate({
            scrollTop: offset
        }, 500, function(){
            listen = true;
        });
    } else {
        alert('error');
    }
}

$(document).ready(function(){

    var fullHeight = 0;

    $('#section1 div').each(function(){
        fullHeight = fullHeight + $(this).height();
    });

    var lastScrollTop1 = 0;
    $('#section1').on('scroll', function(e){
        var st = $(this).scrollTop();
        if (st > lastScrollTop1){
            if( $('#section1').scrollTop() + $(window).height() == fullHeight) {
                if(listen){
                    $('body').addClass('shifted');
                }
            }
        }
        lastScrollTop1 = st;
    });

    $('#section1').on('mousewheel', function(e){
        e.preventDefault();
        var st = $(this).scrollTop();
        if (st > lastScrollTop1){
            nextSlide();
        } else {
            prevSlide();
        }
    });

    var lastScrollTop2 = 0;
    $('#section2').on('scroll', function(e){            
        var st = $(this).scrollTop();
        if (st > lastScrollTop1){
        } else {    
            if( st == 0 ){
                $('body').removeClass('shifted');
            }
        }
        lastScrollTop1 = st;
    });

    $('.slide-dots').css({'margin-top':-$('.slide-dots').height() / 2});    
    $('.slide-dot').first().addClass('active');

    $(document).on('click', '.slide-dot', function(e){
        e.preventDefault();
        showSlide( $(this).index() );
    });

    $(document).on('click', '.slide-dot-fake', function(e){
        e.preventDefault();
        $('body').addClass('shifted');
    });

});

对于那些想知道为什么我不使用 fullPage.js 之类的东西的人来说，这是因为它无法处理我想要在两个区域之间转换并有两个滚动条(每个区域一个)的方式。

Answer 1

您可以使用:

e.originalEvent.wheelDelta

代替:

st > lastScrollTop1

在第三个问题的 mousewheel 事件中检查用户是否向上或向下滚动。并更改 prevSlide 中的 +/-。我用了dm4web你的第一个问题的 fiddle 。我用过:

scrollTop: offset - 1

代替:

scrollTop: offset

对于你的第二个问题，因为当滚动到第三个元素的最后一个像素时，它会自动转到下一部分，所以 1 个像素就足够了。

这是 fiddle :http://jsfiddle.net/3odc8zmx/3/