Prevent auf hartes Scroll Schütteln während scrollTop Animieren

Question

I Abschnitt zu Abschnitt verschiebe, aber wenn ich hart mit der Maus bewegen (und nicht nur eine einfache Scrollen) oder ich scrollen hart auf dem Laptop-Touchpad, schüttelt es nach oben und unten vor dem Scrollen Animation beginnt oder sogar Sprünge 2 Abschnitte!

Ist es möglich, es reibungslos zu scrollen und immer nur einen Abschnitt (nicht 2 Abschnitte springen) unabhängig davon, wie schwer jemand scrollt und grundsätzlich Scrollen deaktivieren, während die Animation stattfindet?

Mein Code (JSFiddle):

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

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

 
setHeights(); 
 

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

 
    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'); 
 
    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) 
 
    console.log($(window).scrollTop()); 
 
    }); 
 

 
});

.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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> 
 

 

 
<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>

Answer 1

Sie müssen das Standardmousewheel-Ereignis passiert, verhindern, dass mit Hilfe von Javascript anstatt den gewünschten Effekt auszuführen.

$('html').mousewheel(function(e) { 
    e.preventDefault(); 
    //... 
} 

Demo: https://jsfiddle.net/b67uw0cx/1/