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

总结

需要安装插件 mouse-wheel 和 scrollbar

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

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

https://better-scroll.github.io/docs/zh-CN/plugins/mouse-wheel.html
为了开启鼠标滚动功能,你需要首先引入 mouseWheel 插件,通过静态方法 BScroll.use() 注册插件,最后传入正确的 mouseWheel 选项对象。
在这里插入图片描述

npm install @better-scroll/mouse-wheel --save

基础使用

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 提供了样式美观的滚动条。
在这里插入图片描述
在这里插入图片描述

npm install @better-scroll/scroll-bar --save

使用

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)
new BScroll('.scroll-wrapper', {scrollY: true,click: true,scrollbar: {fade: false, // 始终显示滚动条},mouseWheel: true // 开启PC的鼠标滚动})

备注:

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

new BScroll('.scroll-wrapper', {scrollY: true,scrollbar: {fade: false, // 始终显示滚动条interactive: true, // 滚动条是否可以交互scrollbarTrackClickable: true // 滚动条轨道是否允许点击},mouseWheel: true // 开启PC的鼠标滚动})

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/28715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

光伏工程开发的详细步骤

光伏工程作为可再生能源领域的重要组成部分,其开发过程涉及多个环节,包括开发、测绘、设计、施工和运维等。下面将详细介绍这些步骤。 一、开发阶段 1、前期调研:对目标地区进行能源政策、市场需求、资源条件等方面的调研,评估项…

SuperMap GIS基础产品FAQ集锦(20240617)

一、SuperMap iDesktopX 问题1:请问udbx数据源的数据集最多支持多少个属性字段? 现在客户合并数据集后属性字段有1119个,导致无法复制数据集 11.1.1 【问题原因】理论上是没有上限,我们底层没有针对这点进行限制,通常…

.gitignore文件忽略的内容不生效问题解决

文章目录 ①:现象②:原因③:解决 ①:现象 在已经提交过的git管理的项目中, 新增加一个.gitignore文件,文件内忽略内容不生效或者修改.gitignore文件之后,文件内新增的忽略内容不生效 ②&#…

了解 Blazor Server App 项目结构

在本文中,你将获得以下问题的答案 先决条件如何创建 Blazor Server App 项目?Blazor Server 应用程序的项目结构是什么样的?每个默认文件夹有什么用如何设置启动razor组件或页面运行? 先决条件 HTML、CSS 和 Javascript 的基本…

如何使用任意浏览器远程访问本地搭建的Jellyfin影音平台

文章目录 前言1. Jellyfin服务网站搭建1.1 Jellyfin下载和安装1.2 Jellyfin网页测试 2.本地网页发布2.1 cpolar的安装和注册2.2 Cpolar云端设置2.3 Cpolar本地设置 3.公网访问测试4. 结语 前言 本文主要分享如何使用Windows电脑本地部署Jellyfin影音服务并结合cpolar内网穿透工…

如何在招聘中开始使用AI?

在人工智能时代,招聘团队面临着“用更少的钱做更多的事情”的压力:用更少的钱和更少的团队。根据一项调查,58%的受访者认为,“提高我们助教团队的效率,降低成本”是明年招聘职位的首要任务。在招聘中使用人工智能是提高…

【机器学习300问】119、什么是语言模型?

语言模型(Language Models)是自然语言处理(NLP)的重要组成部分,它的目的是量化一段文本或一个序列的概率。简单讲就是你给语言模型一个句子,它给你计算出特定语言中这个句子出现的概率。这样的概率度量可以…

【Netty】nio阻塞非阻塞Selector

阻塞VS非阻塞 阻塞 阻塞模式下,相关方法都会导致线程暂停。 ServerSocketChannel.accept() 会在没有建立连接的时候让线程暂停 SocketChannel.read()会在没有数据的时候让线程暂停。 阻塞的表现就是线程暂停了,暂停期间不会占用CPU,但线程…

Excel 常用技巧(四)

Microsoft Excel 是微软为 Windows、macOS、Android 和 iOS 开发的电子表格软件,可以用来制作电子表格、完成许多复杂的数据运算,进行数据的分析和预测,并且具有强大的制作图表的功能。由于 Excel 具有十分友好的人机界面和强大的计算功能&am…

直播美颜SDK技术指南:实现实时美颜效果的算法方案

本篇文章,小编将探讨直播美颜SDK的技术实现和算法方案。 一、美颜技术概述 美颜技术通过一系列图像处理算法,实时美颜效果可以在视频直播过程中实时呈现,提升用户的直播体验。为了实现这些效果,需要结合图像处理和计算机视觉技术…

生产 的mybatisplus 日志输入到日志文件

默认是输出到控制台.不输出到日志文件 输出到日志文件.需要修改配置 第一步. logging:config: classpath:logback-wshoto.xml第二步 mybatis-plus:configuration:cache-enabled: truedefault-executor-type: reuselog-impl: org.apache.ibatis.logging.slf4j.Slf4jImpl第三步…

别太小看“静态免杀“

0x01 简述 免杀总体来说可分为两种,静态免杀/动态免杀。往往来说,我们更注重于在内部代码层面实现一些免杀技巧,但在有些时候,动态免杀静态免杀以"打组合拳"的方式效果往往会更出人所料。 当我们的程序生成后&#xf…

Spring IOC 控制反转(注解版)

Spring IOC 控制反转 文章目录 Spring IOC 控制反转一、前言什么是控制反转(IOC)什么是依赖注入(DI) 二、介绍 IOC2.1 传统思想代码2.2 解决方案2.3 IOC思想代码2.4 IOC 使用(Autowired依赖注入)2.5 IOC 优…

从零开始学GeoServer源码(一)(搭建开发环境Win10+IDEA23.3.5+jdk11+geoserver2.24.x)

搭建开发环境 参考资料 0、基础环境准备0.1、idea0.2、jdk0.3、源码 1、导入工程2、配置启动环境2.1、打开新增配置面板2.2、配置工作目录2.2.1、从常用配置中选择2.2.2、直接粘贴 2.3最终效果 3、调整源码3.1、添加maven引用3.2、注释无效代码3.3、删除测试代码 4、修改运行端…

LeetCode esay mid 记录

1486. 数组异或操作 感觉一般也用不到 emmm 灵茶山艾府传送门 推导过程可以结合官网部分观看 重点由两部分的结合 将特定部分转换为常见部分 0到n的异或和表示 2595. 奇偶位数 0x555是十六进制数,转换为二进制为 0101 0101 0101 class Solution {public int[…

【面试 - 页面优化举例】页面跳转卡顿问题解决 - 页面跳转速度优化

目录 为何要优化如何优化优化1 - 懒加载优化2 - el-tree 子节点默认不展开 为何要优化 页面A跳转到也页面B时,页面出现卡顿情况: 【问题】页面A → 页面B时,页面B进入到了 created 钩子后过了六七秒才进入到 mounted 钩子;【分析经…

吉林省教育学院学报杂志社吉林省教育学院学报编辑部2024年第5期目录

“研培一体”理论与实践 教师培训管理共同体的职能定位与价值追求 张岩; 1-3 数字化转型背景下教师培训工作的发展路径 李春光; 4-6 挖掘数智潜能,推进教师培训融合创新 鲍赫; 7-9《吉林省教育学院学报》投稿:cn7kantougao163.com 精准培…

Apache DolphinScheduler查看版本信息

我找了半天,没有看到版本在哪里。然后我看配置,他要连接数据库,我去他存储数据库的表里面,看到了相关的版本信息。 cd /home/dolphinscheduler/dolphinscheduler/bin/env dolphinscheduler找到了里面的密码 版本是3.1.3

14.编写自动化测试(上)

标题 一、如何编写测试1.1 一些概念1.2 测试函数剖析1.3 使用assert!宏检查结果1.4 使用assert_eq!和assert_ne!宏来测试相等1&#xff09; assert_eq!2&#xff09; assert_ne! 1.5 使用 should_panic 检查 panic 二、将 Result<T, E> 用于测试 一、如何编写测试 1.1 一…

Windows defender bypass | 免杀

官方文档 在制作免杀的过程中,翻找 Windows 官方对 Windows Defender 的介绍,发现有这样一个目录:Configure Microsoft Defender Antivirus exclusions on Windows Server(在 Windows server 中配置defender排除项)。 https://docs.microsoft.com/en-us/microsoft-365/se…