Question

我有一个项目，我希望快速平滑滚动。我尝试了很多，我找到了一些解决方案。但是当我一次多次旋转鼠标滚轮并且鼠标滚轮的最后一次旋转变得平滑时，它们都无法滚动平滑。经过大量的搜索，我得到了一个我想要的例子。但我无法弄清楚js功能是什么。 Here is the example。我不想使用任何插件，因为我已经在我的项目中使用了太多的插件，为此它的加载速度非常慢。只有Jquery或纯JavaScript才有可能吗？

Answer 1

这不是我的解决方案，但我认为它非常合适，所以我只是复制粘贴它：

jQuery.extend(jQuery.easing, {
  easeOutQuint: function(x, t, b, c, d) {
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
  }
});

var wheel = false,
  $docH = $(document).height() - $(window).height(),
  $scrollTop = $(window).scrollTop();

$(window).bind('scroll', function() {
  if (wheel === false) {
    $scrollTop = $(this).scrollTop();
  }
});
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
  delta = delta || -e.originalEvent.detail / 3 || 
  e.originalEvent.wheelDelta / 5; //edit this to your needs - the higher the slower
  wheel = true;

  $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
  $($.browser.webkit ? 'body' : 'html').stop().animate({
    scrollTop: $scrollTop + 'px'
  }, 2000, 'easeOutQuint', function() {
    wheel = false;
  });
  return false;
});

这会覆盖滚动事件的默认行为 Fiddle用户Szar的来源和完整学分 - 小提琴：https://jsfiddle.net/Szar/xmkwa8ft/

P.S。这是在1分钟谷歌搜索中使用术语＆＃34;光滑鼠标滚动css＆＃34;

鼠标滚轮快速平滑滚动

1 个答案: