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

news2024/10/16 14:53:28

总结

需要安装插件 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.coloradmin.cn/o/1844023.html

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

相关文章

VBA基础知识点总结

VBA教程 VBScript教程 数据类型 数字数据类型 非数字数据类型 变量&常量 可以通过Dim、Public或Private语句声明变量。 变量语法&#xff1a;Dim <<variable_name>> As <<variable_type>>&#xff08;需要在使用它们之前声明&#xff09; 常量语…

对错问题:凡事没有绝对的对与错,要看义所在、良知所在

孔子说&#xff1a;君子对于天下所发生的很多事&#xff0c;如评判政策变动、战争等&#xff0c;没有绝对的对&#xff0c;也没有绝对的错&#xff0c;一切要看事情本身是否符合“ 义 ”。

[信号与系统]傅里叶变换、卷积定理、和为什么时域的卷积等于频域相乘。

前言 最近学习以下IIR滤波器和FIR滤波器 前置 1. 时域和频域 时域和频域代表着频率和时间与振幅的一一对应关系 2. 卷积运算 关于卷积的定义&#xff0c;详情请看 这篇文章能让你明白卷积 卷积运算是一种数学运算&#xff0c;广泛应用于信号处理、图像处理、控制系统和概…

吴恩达机器学习 第三课 week1 无监督学习算法(上)

目录 01 学习目标 02 无监督学习 03 K-means聚类算法 3.1 K-means聚类算法原理 3.2 k-means算法实现 3.3 利用k-means算法压缩图片 04 总结 01 学习目标 &#xff08;1&#xff09;了解无监督学习算法 &#xff08;2&#xff09;掌握K-means聚类算法实现步骤 &#xff…

AWS-PatchAsgInstance自动化定时ASG组打补丁

问题 需要给AWS的EC2水平自动扩展组AutoScaling Group&#xff08;ASG&#xff09;中的EC2自动定期打补丁。 创建自动化运行IAM角色 找到创建角色入口页面&#xff0c;如下图&#xff1a; 开始创建Systems Manager自动化运行的IAM角色&#xff0c;如下图&#xff1a; 设置…

ppt模版免费下载网站大全

PPT是我们传达信息、分享知识、展示项目和进行商务沟通的重要工具。一个设计精美、布局合理的PPT不仅能吸引观众的注意力&#xff0c;还能有效提升演讲者的专业形象。PPT模版可以帮助我们高效制作出精美的PPT&#xff0c;下面小编就来和大家分享一些免费无需注册登录就可以直接…

WEB自动化测试(selenium工具)框架、面试题

一、什么是web自动化测试 让程序员代替人为去验证web项目功能的过程 二、什么web项目适合自动化测试 1)需求变动不频繁 测试脚本的稳定性决定了自动化测试的维护成本。如果软件需求变动过于频繁&#xff0c;测试人员需要根据变动的需求来更新测试用例以及相关的测试脚本&…

图像分割(三)-RGB转HSV后图像分割方法

常用彩色模型有RGB和HSV模型&#xff0c;有时候在RGB颜色空间进行背景分割比较困难的问题&#xff0c;转换为HSV模型然后对色调和饱和度图像进行处理会得到比较理想的处理结果,下面通过一个实例讲解该方法的MATLAB实现&#xff0c;该方法对其他图像检测也具有一定的参考价值。 …

接口测试面试必问题:在Http协议中应用Get和Post接口测试的区别是什么?

在进行接口测试时&#xff0c;我们常常会遇到两种常见的HTTP请求方法&#xff1a;GET和POST。虽然它们都是用来向服务器发送请求&#xff0c;但在使用和测试时有一些区别。本文将从0到1详细介绍GET和POST接口测试的区别&#xff0c;以便在面试时能够回答相关问题。 GET和POST是…

YOLOv10改进 | Conv篇 |YOLOv10引入SPD-Conv卷积

1. SPD-Conv介绍 1.1 摘要:卷积神经网络(CNN)在图像分类和目标检测等许多计算机视觉任务中取得了巨大的成功。 然而,在图像分辨率较低或物体较小的更艰巨的任务中,它们的性能会迅速下降。 在本文中,我们指出,这源于现有 CNN 架构中一个有缺陷但常见的设计,即使用跨步卷…

政策更新记录:敏感信息访问权限与API使用变更

我们将更新“健康数据共享”政策,简化“健康数据共享”申请流程,并与“健康类应用”政策保持一致。此外,我们将于今年晚些时候在 Play 管理中心推出一项新的声明,取代当前使用表单进行申请的方式。 公布日期:2024-04-03 Health Connect 政策要求及常见问题解答 初步认识对…

物联网设备安装相关知识整理

拓扑图 对于ADAM-4150先接设备的整体的供电。 ADAM-4150就涉及到几个电子元器件的连接&#xff0c;一个是485-232的转换器&#xff0c;一个是将RS-232转换为USB的转接口&#xff0c;因为现在的计算机很多都去掉了RS-232接口而使用USB接口。 4150右侧有个拨码&#xff0c;分别两…

互联网技术基础-计算机人必看

目录 1.Internet的工作原理 1、Internet是一个分组交换系统 2、路由器是Internet实现互连的“标准件” 3、TCP/IP是Internet的核心协议 4、客户机/服务器的工作模式 2. IP地址 2.1 IP地址分类 2.2特殊IP地址 2.3路由器和IP编制原则 2.4子网的划分 2.5 IPV6 3.域名系…

嵌入式实验---实验三 定时器实验

一、实验目的 1、掌握STM32F103定时器程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、使用SysTick定时方式控制LED闪烁&#xff1b; 2、使用通用定时器产生PWM脉冲&#xff0c;通过调整占空比实现两个目标&#xff1a; &#xff08;1&#xf…

《C++ Primer》导学系列:第 6 章 - 函数

6.1 函数基础 6.1.1 基本概念 函数是C程序的基本组成单元&#xff0c;用于将代码组织成可以复用的模块。函数通过函数名进行调用&#xff0c;并且可以接受参数和返回值。函数的定义包括函数头和函数体&#xff0c;其中函数头描述了函数的接口&#xff0c;函数体包含了具体的实…

基于SpringBoot+Vue电影推荐系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

Python 绘制圆欠采样时的数学图形

Python 绘制圆欠采样时的数学图形 正文end_radian 190end_radian 180end_radian 170end_radian 130end_radian 120 正文 今天在绘制圆形的时候遇到了意外&#xff0c;发现了一个有意思的现象&#xff0c;这里特来记录一下。 end_radian 190 import numpy as np import…

【因果推断python】45_估计量1

目录 问题设置 目标转换 到目前为止&#xff0c;我们已经了解了如何在干预不是随机分配的情况下对我们的数据进行纠偏&#xff0c;这会导致混淆偏差。这有助于我们解决因果推理中的识别问题。换句话说&#xff0c;一旦单位是可交换的&#xff0c;或者 &#xff0c;就可以学习…

H3C防火墙抓包(图形化)

一.报文捕获 &#xff0c;然后通过wireshark查看报文 二.报文示踪 &#xff0c; 输入源目等信息&#xff0c; 查看报文的详情

JavaWeb之JSON、AJAX

JSON 什么是JSON&#xff1a;JSON: JavaScript Object Notation JS对象简谱 , 是一种轻量级的数据交换格式(JavaScript提供) 特点 [{"name":"周珍珍", "age":18},{"name":"李淑文","age":20}]数据是以键值对形式…