【已解决】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的鼠标滚动
    })
相关推荐
斯~内克5 分钟前
深入探索 Node.js 文件监听机制:从前端工程化到原理剖析
前端·node.js
陈随易10 分钟前
请立即使用小程序开发者工具24年9月份版本
前端·后端·程序员
寅时码13 分钟前
纯前端让 AI 学会玩贪吃蛇,不使用任何库
前端·人工智能·算法
90后的晨仔13 分钟前
dart 中的位置参数和命名参数的区别?
前端·flutter
import_random13 分钟前
[机器学习]GBDT高阶特征组合
前端
华科云商xiao徐24 分钟前
使用Alamofire下载网站首页内容
前端
南蓝25 分钟前
【React】Redux、Recoil、jotai、zustand 几个状态管理库的对比
前端
itsOli29 分钟前
(20)详情页开发——② 公用图片画廊组件 | Vue.js 项目实战: 移动端“旅游网站”开发
前端·javascript·vue.js
Riesenzahn31 分钟前
说说你对JSBridge的理解
前端·javascript
Mike_jia33 分钟前
一篇文章带你了解一款强大的开源容器桌面管理工具---Podman Desktop
前端