better-scroll在页面中无法正常滚动的原因

最新推荐文章于 2023-11-01 10:47:22 发布
原创 最新推荐文章于 2023-11-01 10:47:22 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html

本文介绍在移动端页面使用 BetterScroll 时遇到的无法正常滚动的问题及解决方案。主要原因是页面渲染速度快于数据加载速度导致 BetterScroll 无法获取正确的滚动内容高度。

在写移动端页面时，第三方库better-scroll可能会发生无法正常滚动的bug,这是因为页面中有很多调用接口异步操作获取到的数据，因为页面渲染较快，betterscroll无法快速获取到需要滚动的内容高度 解决办法：

 

better-scroll 无法滚动问题
d295968572的博客
03-29 800
一、better-scroll版本不合适-----之前使用的是2.x版本 npm uninstall better-scroll npm install better-scroll@1.8.1 --save 二、DOM层级关系 <!--错误写法--> <div class="wrapper"> <div class="content"> 内容..... </div> <ul> .
关于使用better-scroll滑动无法滚动的技术总结
baidu_41677887的博客
09-23 3220
这个问题是我在编辑商城的遇到的问题，着实让我查找了好多资料 问题描述：使用better-scroll插件的时候，页面无法滚动 问题发生原因：最开始使用的better-scroll时候，对于普通的文档滑动完全没问题，但是我对起封装了一层代码， <template> <div class="wrapper" ref='wrapper'> <div class="content"> <slot></slot> </div>
vue better scroll 无法滚动的解决方法
08-27
better scroll可以实现轮播图和页面滚动，是移动端滚动插件，这篇文章主要介绍了vue better scroll 无法滚动的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
彻底解决使用better-scroll页面不能滚动的问题
jiaohuizhuang6019的博客
11-01 2055
彻底解决使用better-scroll页面不能滚动的问题
better-scroll无法滚动的问题
热门推荐
OHRadiance的专栏
11-11 1万+
总结一下目前为止碰到的better-scroll无法滚动的问题。 遇见better-scroll(以下简称：BS)无法滚动，可从两方面去考虑。 一是层级关系出错，二是计算高度出错。1，层级关系BS的基本结构是：一个wrapper曾，一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。<div class="wrapper"> <div
vue利用better-scroll实现轮播图与页面滚动详解
08-29
本文将详细介绍如何在Vue中利用`better-scroll`实现轮播图和页面滚动功能。 首先，确保已经正确安装`better-scroll`。在项目根目录的`package.json`文件中，添加`"better-scroll": "^0.1.15"`到`dependencies`部分...
vue better-scroll插件使用详解
08-28
然而，在使用better-scroll时，需要注意Vue的数据更新是异步的，better-scroll无法获取目标内容的高度，导致无法滚动的问题。解决这个问题可以使用Vue的nextTick()方法，例如： Vue.nextTick(function () { // DOM...
vue和better-scroll实现列表左右联动效果详解
10-17
Better-Scroll是一款强大的滚动插件，能够使页面实现平滑的滚动效果，同时支持各种滚动交互和回调。在Vue中，我们需要在组件的挂载后（mounted）初始化Better-Scroll实例，并设置相应的配置项。 在实现左右联动的...
vue基于better-scroll仿京东分类列表
11-20
在`class.vue`组件中，我们需要集成Better Scroll，初始化滚动容器，并监听滚动事件，以便在用户滚动时更新界面或执行其他操作。 具体实现步骤如下： 1. 安装Better Scroll：`npm install better-scroll --save` 2....
解决 better-scroll插件使用过程中无法滑动bug（原创，禁止转载）
zqy123456789000的博客
11-22 1859
解决 better-scroll插件使用过程中无法滑动bug 1：首先我们要知道 better-scroll 实现的原理 条件 必须包含两个大的div，外层和内层div 外层div设置可视的大小(宽或者高)-有限制宽或高 内层div，包裹整个可以滚动的部分 内层div(content)高度一定大于外层div(wrapper)的宽或高，才能滚动 翻译：Warpper（包装，包装器) content(内容) 顾名思义，Wrapper 就是外层的盒子，content 就是你需要滑动区域里的内容 也就是，你想要使
Better Scroll不能滚动问题
kayir的博客
07-30 747
最近在学Vue框架，在初始化Better Scroll插件时遇到了内容不能滚动的问题。 于是在网上搜了几下大概了解到Better Scroll只有在内容高度大于容器高度时滚动。Better Scroll的容器里内容如果是ajax异步获取的，在获取数据之前初始化了Better Scroll就会导致内容高度比容器高度小，从而不会滚动。记录一下两种解决办法。 1.我们只需用watch监听获取的数据，然后里面运行一下this.scroll.refresh()就能解决。 mounted () { this.scro
better-scroll无法滚动的问题。
weixin_30597269的博客
12-07 238
better-scroll无法滚动的问题。1遇见better-scroll(以下简称：BS)无法滚动，可从两方面去考虑。一是层级关系出错，二是计算高度出错。###1，层级关系BS的基本结构是：一个wrapper层，一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。 <div class="wrapper"> 　　<di...
vue3中使用better-scroll出现无法滑动看不到更多数据的问题
qq_41027095的博客
05-22 1203
比如，上拉加载一次数据后，数据被加入到了数据列表，这导致v-for遍历生成的DOM更多，高度也就变高了，这是就需要调用refresh()。如果你的数据列表是用ref声明的响应式数据，则像下面的代码那样即可；如果你的数据列表是用reactive的数据模型中的属性，则在watch中，要写成getter函数的方式。在 vue 中数据发生变化后，dom 的更新是需要一定时间的，而我们在数据更新之后就立即去操作或者获取 dom 的话，其实还是操作和获取的未更新的 dom ，而我们可以调用。nextTick 的作用。
better-scroll滚动无效 几种原因
前端大白话
08-22 2925
better-scroll滚动无效 几种原因 1.是否设置初始化 2.是否父元素设置了高度大于父元素 父元素可以设置100%， 3.DOM的的层级是否正确 &lt;div class="wrapper"&gt; &lt;div class="content"&gt; content... &lt;/div&gt; &lt;/div&gt; 上面这种方式是可以实...
better-scroll滚动失效的原因
m0_50853469的博客
05-31 1417
1.wrapper只能有一个div。 2.打印下scroll，看下wrapper和scroller里边的东西，在审查元素，看下scroller是否含有better-scroll的样式。 3.看下里边的wrapperHeight<scrollHeight，还有hasVerticalScroll是否为true。 4.如果上面条件都满足，还不能滚动，那就是没有写click的配置项。 ...
Better-scroll 不滚动问题解决
HYeeee的博客
10-05 3082
1、层级 一定要有一个包裹内容的元素，因为滚动就是content的高度大于wrapper的高度。 &amp;lt;div class=&quot;wrapper&quot;&amp;gt; &amp;lt;div class=&quot;content&quot;&amp;gt; //滚动的内容 &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; 这个时候可以看开发者工
使用了better-scroll 却无法滚动问题
qq_54007297的博客
12-05 1074
一、better-scroll版本不合适-----之前使用的是2.x版本 1：卸载已安装的版本 npm uninstall better-scroll 2：安装新版本 npm install better-scroll@1.8.1 --save 二、子元素内容小于父元素 绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素且唯一一个，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是.
关于使用better-scroll滑动无法滚动的问题
weixin_51897979的博客
07-26 347
因为是数据加载慢导致的问题，所以我们可以设置当数据加载完成之后再执行代码 问题解决： 直接给scroll实例对象添加oberveDOM：true
vue 中使用better-scroll插件时无法滚动问题
QMM的专栏
08-30 6520
1. 检查HTML 以及css是否有写错的地方，有时候写错会导致html中dom无法正确生成，而better-scroll是需要dom完全加载完毕后才可以正确滚动的 2. html和css全部写正确的时候还是无法滚动     检查better-scroll是否初始化时机太早（dom没有完全生成，已经初始化了），可以使用vue的$nextTick来异步初始化better-scroll 3. b
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值