【已解决】better-scroll在PC端如何开启鼠标滚动以及如何始终显示滚动条

总结

需要安装插件 mouse-wheelscrollbar

在PC端如何开启鼠标滚动?

需要安装官方提供的滚动插件:mouse-wheel

https://better-scroll.github.io/docs/zh-CN/plugins/mouse-wheel.html

为了开启鼠标滚动功能,你需要首先引入 mouseWheel 插件,通过静态方法 BScroll.use() 注册插件,最后传入正确的 mouseWheel 选项对象。

bash 复制代码
npm install @better-scroll/mouse-wheel --save

基础使用

bash 复制代码
import BScroll from '@better-scroll/core'
  import MouseWheel from '@better-scroll/mouse-wheel'
  BScroll.use(MouseWheel)

  new BScroll('.bs-wrapper', {
    //...
    mouseWheel: {
      speed: 20,
      invert: false,
      easeTime: 300
    }
  })

如何始终显示滚动条

scrollbar 插件为 BetterScroll 提供了样式美观的滚动条。

bash 复制代码
npm install @better-scroll/scroll-bar --save

使用

bash 复制代码
import BScroll from '@better-scroll/core'
import ScrollBar from '@better-scroll/scroll-bar' // 为了修改滚动条
import MouseWheel from '@better-scroll/mouse-wheel' // 为了触发鼠标滚动
BScroll.use(MouseWheel)
BScroll.use(ScrollBar)
bash 复制代码
new BScroll('.scroll-wrapper', {
        scrollY: true,
        click: true,
        scrollbar: {
            fade: false, // 始终显示滚动条
        },
        mouseWheel: true // 开启PC的鼠标滚动
    })

备注:

出现滚动条后,PC端的滚动方式和浏览器的不一致,可以如下处理:

bash 复制代码
new BScroll('.scroll-wrapper', {
        scrollY: true,
        scrollbar: {
            fade: false, // 始终显示滚动条
            interactive: true, // 滚动条是否可以交互
            scrollbarTrackClickable: true // 滚动条轨道是否允许点击
        },
        mouseWheel: true // 开启PC的鼠标滚动
    })
相关推荐
再学一点就睡3 分钟前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20205 分钟前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象5 分钟前
flutter第二话题-布局约束
前端
龙在天7 分钟前
我是前端,scss颜色函数你用过吗?
前端
Mapmost14 分钟前
单体化解锁3DGS场景深层交互价值,让3DGS模型真正被用起来!
前端
YoungUpUp14 分钟前
【文件快速搜索神器Everything】实用工具强推——文件快速搜索神器Everything详细图文下载安装教程 办公学习必备软件
学习·everything·文件搜索·实用办公软件·everything 工具·文件快速搜索·搜索神器
RaLi和夕21 分钟前
单片机学习笔记.C51存储器类型含义及用法
笔记·单片机·学习
欢脱的小猴子42 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳44 分钟前
CSS 基础概念
前端·css·css3
前端小巷子44 分钟前
JS 实现图片瀑布流布局
前端·javascript·面试