Question

我正在滚动部分到部分，但如果我在最后一部分（小提琴中的蓝色）并且我向下滚动，我想要正常滚动（蓝色是最后一部分，下面的任何内容都应该滚动正常）。

在各个部分之间滚动时，我希望它能够平滑滚动（因为在滚动时不要摇晃）所以我使用：

e.preventDefault();

但是，如果在最后一节之后向下滚动，我需要禁用它。

我试图通过实现一个名为shake的变量来实现这一点，但是：

1）如果我在最后一节（绿色）之前，我会严厉向下滚动，我会动摇。

2）一旦我在绿色之后滚动到蓝色部分，我立即无法向上滚动到绿色，有几秒钟的延迟才会让我。

3）一旦我滚动了PAST蓝色部分并正常滚动，然后我严厉地向上滚动，我得到了震动。

小提琴1 - 没有shake变量 - https://jsfiddle.net/b67uw0cx/

小提琴2 - 使用shake变量 - https://jsfiddle.net/axgzqj8h/1/

.div {
    width: 100%;
}

.red {
    background: red;
}

.yellow {
    background: yellow;
}

.green {
    background: green;
}

.blue {
    background: blue;
}

.abovefooter {
    background: gray;
    height: 200px;
}

.footer {
    background: black;
    height: 350px;
}


<div id="id0" data-id="0" class="nbhd red scrolledto"></div>
<div id="id1" data-id="1" class="nbhd yellow"></div>
<div id="id2" data-id="2" class="nbhd green"></div>
<div id="id3" data-id="3" class="nbhd blue"></div>
<div class="abovefooter"></div>
<div class="footer"></div>

var isAnimated = false;
var nbhdLength = $('.nbhd').length;
var lastSectionId = nbhdLength - 1;
var allHeight = ( nbhdLength - 1 ) * window.innerHeight;
var up = true;
var shake = true;

function setHeights() {
    $('.nbhd').css('height', window.innerHeight);
}

setHeights();

$('html').mousewheel(function(e) {

    if (shake) {
        e.preventDefault();
    }

    var up = e.deltaY > 0;

    if (up) {
        console.log('up');
        up = true;

    } else {
        console.log('down');
        up = false;
        // console.log(up);
    }


    if ( ! up && $('#id'+lastSectionId).hasClass('scrolledto') || ( ! up && ! $('.scrolledto').length ) ) {
        $('.scrolledto').removeClass('scrolledto');
        shake = false;
        return;
    }

    if (isAnimated) return;
    isAnimated = true;

    var currentSectionId = $('.nbhd.scrolledto').data('id');

    up ? currentSectionId-- : currentSectionId++;

    if (currentSectionId < 0) currentSectionId = 0;

    if ( ! $('.scrolledto').length ) currentSectionId = lastSectionId;

    $('.scrolledto').removeClass('scrolledto');

    var section = $('#id'+currentSectionId);

    section.addClass('scrolledto');

    var pos = section.offset().top;

    $('body, html').animate({scrollTop: pos}, 1000, function() {
        setTimeout(function(){
          isAnimated = false;
        },100);
        shake = true;
    });

});

有条件地防止默认鼠标滚动

0 个答案: