首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在鼠标滚轮上快速平滑滚动

在鼠标滚轮上快速平滑滚动
EN

Stack Overflow用户
提问于 2016-02-29 22:46:45
回答 1查看 1.4K关注 0票数 0

我有一个项目,在我想要快速平滑滚动。我试过lot,我找到了一些解决方案。但当我一次多次旋转鼠标滚轮时,它们都不能平滑地滚动,最后一次旋转鼠标滚轮变得平滑。经过大量的搜索,我得到了一个我想要的例子。但是我不知道js函数是什么。Here is the example。我不想使用任何插件,因为我已经在我的项目中使用了太多插件,而且对于这个项目来说,加载太慢了。是否可以只使用Jquery或纯javascript?

EN

回答 1

Stack Overflow用户

发布于 2016-02-29 23:04:56

这不是我的解决方案,但我认为它是合适的和相当整洁的,所以我只是复制粘贴它:

代码语言:javascript
运行
复制
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;
});

这将覆盖滚动事件的默认行为。

小提琴用户Szar的来源和完整学分-小提琴:https://jsfiddle.net/Szar/xmkwa8ft/

附言:这是在谷歌上用“平滑鼠标滚动css”搜索1分钟后发现的。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35702469

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档