vue-scroller兼容PC端

最新推荐文章于 2025-06-20 10:29:46 发布

奥特蛋_mm

最新推荐文章于 2025-06-20 10:29:46 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue项目实战经验

本文链接：https://blog.youkuaiyun.com/weixin_43254676/article/details/83345422

vue项目实战经验专栏收录该内容

50 篇文章

订阅专栏

本文解决Vue-scroller在PC端不兼容鼠标滚轮上下滑动的问题，通过监听mousewheel事件实现自定义滚动，确保组件在桌面浏览器上的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-scroller不兼容PC端的鼠标滚轮上划和下滑，此时要监听鼠标滚轮事件，mousewheel，在Vue中引用即可

created() {
          this.init()
      }
methods: {
        init(){
            let _this = this  //此this指向的是vue
            window.onmousewheel = function (e) {
        if (e.wheelDelta < 0) {
            _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, 30, false));
            //避免ref中不存在scrollerBottom
        } else {
            _this.$refs.scrollerBottom && (_this.$refs.scrollerBottom.scrollBy(0, -30, false));
        }
    }

参考原文，感谢博主分享
https://www.cnblogs.com/cjh1111/p/7363836.html