在 Google Chrome 中平滑滚动

Question

我使用此代码进行平滑滚动：

 if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, {passive: false} ); window.onmousewheel = document.onmousewheel = wheel; function wheel(event) { var delta = 0; if (event.wheelDelta) delta = event.wheelDelta / 120; else if (event.detail) delta = -event.detail / 3; handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; } var goUp = true; var end = null; var interval = null; function handle(delta) { var animationInterval = 20; //lower is faster var scrollSpeed = 20; //lower is faster if (end == null) { end = $(window).scrollTop(); } end -= 20 * delta; goUp = delta > 0; if (interval == null) { interval = setInterval(function () { var scrollTop = $(window).scrollTop(); var step = Math.round((end - scrollTop) / scrollSpeed); if (scrollTop <= 0 || scrollTop >= $(window).prop("scrollHeight") - $(window).height() || goUp && step > -1 || !goUp && step < 1 ) { clearInterval(interval); interval = null; end = null; } $(window).scrollTop(scrollTop + step ); }, animationInterval); } }

 body { padding: 0 20px; font-size: 20px; line-height: 1.5; }

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> <main> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem repellat, fugiat iusto nam debitis magnam temporibus! Eius harum commodi ut suscipit veritatis accusantium ex at, vitae. Possimus deserunt totam perferendis veniam maiores nihil! Doloremque aliquam voluptate aperiam, eos nulla dolor? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique molestiae cupiditate obcaecati consectetur dolor facilis quod consequuntur est cumque pariatur sed sint neque hic magni aliquid, cum placeat blanditiis! Ab cupiditate harum placeat, esse quaerat neque! Nam est excepturi, ab accusamus provident error, beatae mollitia rem deserunt architecto earum quos. Magnam animi harum perspiciatis autem id vitae doloremque, ducimus est fugit illum aspernatur tempora temporibus at esse voluptate possimus deserunt nesciunt corrupti mollitia odit, veniam architecto. Ea, consequatur, enim. Facilis ipsam numquam cum earum molestias, ab sequi reiciendis distinctio necessitatibus illum! Laborum error autem repudiandae rerum cum, dicta voluptatibus! Itaque. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dolore eum molestias possimus dolor voluptatibus aliquid nobis quia dolorum nulla! </p> </main>

平滑滚动，无处不在，直到最近才在 chrome 中工作。

现在开始解决错误：

[干预] 由于目标被视为被动，因此无法防止被动事件侦听器中的默认值。 看

在 chrome 中平滑滚动不起作用。

问题：这段代码的错误是什么以及如何解决谷歌浏览器中平滑滚动的问题？

Answer 1

我在几个方面开发了一个带有 {passive:false} 的 smoothscroll.js 修改版本，以防止出现错误：

<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Answer 2

原来是一个简单的修复。 我还没有检查这种情况需要哪一个，但它通过将第 511-517 行更改为

if (global.navigator.pointerEnabled) {
  crossvent[op](el, pointers[type], fn, { passive: false });
} else if (global.navigator.msPointerEnabled) {
 crossvent[op](el, microsoft[type], fn, { passive: false });
} else {
crossvent[op](el, touch[type], fn, { passive: false });
crossvent[op](el, type, fn, { passive: false });
}

请参阅https://www.chromestatus.com/features/5093566007214080以及有关最近更新的详细信息https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener 。

希望这可以帮助