Question

Mac用户知道有一个非常柔软的页面滚动触摸板。但是当您使用鼠标滚轮滚动页面或甚至使用浏览器滚动条滚动页面时 - 页面滚动不柔和，但有一些中断。这是因为scrollTop差异，因为它不会渲染每个像素。

有没有办法让跨浏览器的软页面像触摸板一样滚动？我试图使用这段代码：

$window = $(window);

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

function wheel(event) {
  var delta = 0;
  if (event.wheelDelta) delta = event.wheelDelta / 90;
  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);
  }
}

p:nth-child(10n) {background-color: #d00}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </body>
</html>

此代码在Google Chrome和Opera中完美运行。但是Mozilla和Safari没有显示类似的软滚动。它们的卷轴内容太慢了。

还有另一种方法可以进行软页面滚动吗？

Answer 1

您可以使用https://github.com/jquery/jquery-mousewheel来帮助您顺利滚动，因为Firefox需要一个不同的鼠标滚轮事件。

此插件可帮助您在所有浏览器中实现滚动效果。通常，我使用TweenMax进行平滑滚动。

Answer 2

我希望Labu不介意我在这里发布他们的答案，但你可以不使用轻量级插件吗？

Here is the answer from a similar post.

Simplr-SmoothScroll和Demo Here //初始来源here

平滑页面滚动

2 个答案: