解决better-scroll在PC端使用，鼠标无法实现滚动的问题

最新推荐文章于 2024-08-09 08:33:04 发布
最新推荐文章于 2024-08-09 08:33:04 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： JS 文章标签： js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46767474/article/details/115526675
版权
本文介绍了如何在使用better-scroll库的PC端应用中，启用鼠标滚轮进行页面滚动。通过在实例化时设置mouseWheel参数为true，可以轻松解决这一问题，经测试确认有效。
摘要由CSDN通过智能技术生成

在better-scroll的源码里面，有这样的一行代码；
这里就是一个滚轮事件，我们可以传入一个布尔值来实现对PC端的滚动事件的支持
即只需要在实例化的时候加入mouseWheel为 true 即可；

接下来直接上代码：

this.scroll = new BScroll(this.refs.scrollWrapper as Element, {
   
  scrollbar,
  probeType,
  cli
最低0.47元/天 解锁文章
颗粒化
关注
专栏目录
P165-Better-Scroll的安装和使用-用于重构项目滚动方面（PC端和移动端都适用）
m0_51414342的博客
12-15 602
这里先来回顾一下vue的命名规范
better-scroll在vue项目中使用以及部分问题解决如在pc端鼠标滚轮无法滚动问题
蓝小白的博客
02-04 1011
better-scroll better-scroll的GitHub地址: https://github.com/ustbhuangyi/better-scroll 安装 npm install better-scroll -S 使用 dom结构, 这个就是一个ul标签 列表结构 注意这个div的class名为 cinema 等会要把 better-scroll `挂载`到这个dom上 <div class="cinema"> <ul class="cinema-l
探索 BetterScroll：为移动端和PC端带来流畅滚动体验
最新发布
gitblog_00139的博客
08-09 372
探索 BetterScroll：为移动端和PC端带来流畅滚动体验 better-scroll:scroll: inspired by iscroll, and it supports more features and has a better scroll perfermance项目地址:https://gitcode.com/gh_mirrors/be/better-scroll 在移动端和...
【已解决】better-scroll在PC端如何开启鼠标滚动以及如何始终显示滚动条
无言非影的博客
06-17 587
需要安装插件 mouse-wheel 和 scrollbar
better-scroll在PC端使用，鼠标无法实现滚动的解决办法
dwjdj的博客
12-26 1440
查阅了官方文档才知道，需要加一个属性才行 mouseWheel: true const bScroll=new BScroll(document.querySelector('.wrapper'),{ probeType:3, mouseWheel: true }); bScroll.on("scroll",(position)=>{ console.log(position); }) ...
js获取各种高度总结
热门推荐
leileibrother的博客
12-01 1万+
在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。 1，获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 2，获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight window.
better-scroll无法滚动的问题
OHRadiance的专栏
11-11 1万+
总结一下目前为止碰到的better-scroll无法滚动的问题。 遇见better-scroll(以下简称：BS)无法滚动，可从两方面去考虑。 一是层级关系出错，二是计算高度出错。1，层级关系BS的基本结构是：一个wrapper曾，一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。<div class="wrapper"> <div
better-scroll在PC端vue项目内鼠标滚动和自定义滚动条
m0_49039848的博客
09-12 1450
<template> <div> <div id="scroll_box" class="scroll_box"> <div id="scroll_warper" class="scroll_warper" ref="scrollWarper"> <!-- 需要滚动的内容要放在scroll_con内--> <div id="scroll_con">
在vue中封装betterscroll+解决betterscroll封装使用后在浏览器可以滚动但发布到手机上却不能滚动的问题
yuyang_z的博客
07-26 2247
如果对于betterscroll插件还不了解的可以参考BetterScroll：可能是目前最好用的移动端滚动插件 在vue中使用betterscroll、betterscroll的滚动原理以及scroll组件的封装可参考当 better-scroll 遇见 Vue 目录 一、在vue中封装betterscroll 1、创建一个scroll.vue 2、在父组件中使用scroll 二、出...
javascript插件-iscroll和better-scroll
rose的博客
03-19 894
iscroll.js iscroll.js插件是兼容所有移动端滚动条事件的插件，在某些安卓机中，我们无法通过overflow:scroll这个css属性来出现滚动条 要求 1》要给滚动元素加入一个父元素 (只有容器元素的第一个子元素能进行滚动，其他子元素完全被忽略) 2》父元素的高度值要小于滚动区域的高度 (如果为横向滚动则父元素的宽度值要小于滚动元素的宽度) 3》scroll是一个类，每个需要使...
scroll-view鼠标滑动
08-12
3. 尝试使用第三方滚动库，如iScroll或BetterScroll，来替代原生的scroll-view元素实现滚动功能。这些库提供了更多的自定义选项和跨平台的兼容性。 4. 如果以上方法都不起作用，可以考虑与iOS版本相关的问题。在较...
vue 中使用better-scroll插件时无法滚动问题
QMM的专栏
08-30 6416
1. 检查HTML 以及css是否有写错的地方，有时候写错会导致html中dom无法正确生成，而better-scroll是需要dom完全加载完毕后才可以正确滚动的 2. html和css全部写正确的时候还是无法滚动     检查better-scroll是否初始化时机太早（dom没有完全生成，已经初始化了），可以使用vue的$nextTick来异步初始化better-scroll 3. b
Better-Scroll代码正确却无法滑动的小bug解决方案
Heby的博客
07-01 649
better-scroll插件大多数用于移动端上拉加载更多和下拉更新，根据官网说明时需要两个div框，来使用scroll。但是Better-Scroll在决定有多少区域可以滚动时, 是根据scrollerHeight属性决定，scrollerHeight属性是根据放Better-Scroll的content中的子组件的高度，这样就会面临一个很尴尬的问题，因为我们的数据是调取来的，并没有固定的值，并且在执行上拉加载更多时候，高度更是无法估量，因此会造成超出高度部分无法滑动的。以下是我面临该问题...
better-scroll + fastclick 轮播图在pc端方案
xiaxuan1u的博客
09-27 206
轮播图结构是a标签包含img， 在pc端，当用鼠标滑动图片时，会自动打开a标签的链接？ 是不是这两个插件冲突？ 还是说 在滑动时 派发了click事件？ http://www.sofangche.com/jieban/show_178288.html http://www.sofangche.com/jieban/show_178304.html http://www.sofangche.com/jieban/show_178318.html http://www.sofangche.com/jieb
滚动条插件better-scroll的使用
m0_49515138的博客
01-18 567
它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。它编译后的代码大小是 63kb，压缩后是 35kb，gzip 后仅有 9kb，是一款非常轻量的 JS lib。better-scroll是基于父元素固定高度，溢出才滚动的，所以父元素务必定高，否则无法滚动。官网：http://ustbhuangyi.github.io/better-scroll/
Javascript 滚动条插件 BetterScroll 2.0 Script加载 精简版 只带滚动条和鼠标滚动功能
Shopify 开发者
10-12 394
简介 需求 我需要一个自制一个滚动条组件来替代浏览器默认的滚动条，BetterScroll 2.0 是一个非常棒的的一个滚动插件 ，它能解决我的这个问题。 问题 虽然 BetterScroll 2.0 能解决我的问题，但由于我是需要使用 Script 加载 的方式引入到我的网站，而官方只提供了提供了 具备所有插件能力(106KB) 和 基础功能(38.32KB) ，只使用基础功能并不能解决我上面的问题，但使用全功能的又太浪费资源。因此我需要按需引入 MouseWheel 和 ScrollBor 正文 下载文
better-scroll
平安喜乐
09-15 190
better-scroll
下拉刷新上拉加载（Better-scroll）
CIA的博客
11-10 448
介绍 ​ better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。better-scroll 是基于原生 JS 实现的，不依赖任何框架。 http://ustbhuangyi.github.io/better-scroll/doc/api
使用better-scroll实现Vue横向滚动轮播图组件
Vue中使用better-scroll实现轮播图组件 better-scroll是一款重点解决移动端（已支持PC）...使用better-scroll实现轮播图组件可以提供高性能的滚动体验，轻量级的JSlib使得它非常适合移动端和PC端的各种滚动场景需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值