skrollr.js使用时pc端鼠标滚动卡顿

介绍

skrollr.js是一款轻量级且强大的js视差动画效果库

使用

首先去进行引入库并进行初始化init

skrollr.init({
    forceHeight: false,
    easing: {
        vibrate: function(p) {
            return Math.sin(p * 10 * Math.PI);
        }
    }
});

正常写好之后
在你的元素上写上你需要的滑动方式
如<div data-bottom-top="transform: translateY(100px)" data-top-top="transform:translateY(0)"></div>
即该元素的顶部从可视区域的底部运动到可视区域的顶部
官方有很好的解释图如下 可以根据你的需要自行修改参数

它会自动给你添加它的class类 且有可能影响页面自身的布局方式

效果

这边引用一下网易的花与剑官网的效果
若你的项目滑动效果未达到花与剑的效果
则跟项目配置有关系

滑动配置

以下配置对鼠标滑动做了一些优化 且用了jquery
可以试一下

var s = skrollr.init({
      smoothScrolling: false,
      scale: 1,
      easing: 'swing', //设置滑动的运行属性
      forceHeight: false,
    });

    var SCROLLTOP = 0;
    var moveSpeed = 40;
    //设置初始移动速度和scrolltop

    var setTweenMax = (top, speed) => {
      if (!speed) {
        speed = 0.5
      }
      TweenMax.to($('body,html'), speed, {
        scrollTop: top,
        ease: Power1.easeNone,
      })
    }

    $(window).on('mousewheel', function (event) {
      if (event.deltaY > 0) {
        SCROLLTOP -= moveSpeed;
      } else if (event.deltaY < 0) {
        SCROLLTOP += moveSpeed;
      }

      if (SCROLLTOP < 0) {
        SCROLLTOP = 0;
      } else if (SCROLLTOP > $(".main").height()) {
        SCROLLTOP = $(".main").height();
      }

      setTweenMax(SCROLLTOP);
    });

最后

当然 skrollr.js在触控板上看起来可能是正常的 因为它本身对触控板做了一些优化 鼠标优化就需要自己配置了

有兴趣的话可以去看一下它的源码 地址如下
skrollr.js