Question

我正在滚动部分到部分，但如果我用鼠标滚动严厉（不只是一个简单的滚动）或者我在笔记本电脑触摸板上严厉滚动，它会在滚动动画开始之前上下摇晃甚至跳过2个部分！

是否可以使其平滑滚动并且始终只有一个部分（不是跳过2个部分），无论有人滚动多少并且在动画发生时基本上禁用滚动？

我的代码（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

您需要阻止发生默认的mouseWheel事件，而是使用javascript来执行所需的效果。

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

演示：https://jsfiddle.net/b67uw0cx/1/

在动画scrollTop时防止在硬滚动上摇晃

1 个答案: