确保在DOM完全渲染后再初始化better-scroll实例。 如果是在移动设备上使用,确保在移动端刷新页面以正确初始化scroll对象。 检查是否有其他JavaScript错误或冲突影响了better-scroll的正常工作。通过以上步骤,你应该能够解决better-scroll无法滚动的问题。如果问题仍然存在,请检查是否有其他特殊情况或配置错误。
当层级关系检查无误但还是无法滚动,则建议打印BS对象查看一下。 关注两个变量:hasVerticalScroll和scrollerHeight。 如果hasVerticalScroll为false,则一定时wrapper和content计算高度时出错了。此时,对比下scrollerHeight和wrapperHeight,多半是前者小于等于后者。然后,手动修改hasVerticalScroll为true,会发现可以拖拽,但不是滚动。
因为better-scroll实现滚动必须让后者的高度大于前者 如果是相等的,那么将class="content" 的父级元素 和 父级的父级元素高度设置为100%, 如果滚动有超出显示对父级添加 overflow:hidden; 超出隐藏
Better Scroll 静态数据超出屏幕后可以滚动, 但是如果开始内容没有超出容器, 后面数据更新并内容超出容器, 发现滚动无效. Vue文件 代码如下: <template>{{item}}</template>import BScroll from '@better-scroll/core' export default { name: '', data () { return { emojis: ['👉🏼 😁 😂 🤣 ...
一、DOM层级关系 wrapper里面不能存在多个同级div,如果你这样写: 那么ul中的元素将不能滚动 二、content是否被成功添加滚动相关style 以此dom结构为...
better-scroll在PC端使用,鼠标无法实现滚动的解决办法 查阅了官方文档才知道,需要加一个属性才行 mouseWheel: true 1. const bScroll=new BScroll(document.querySelector('.wrapper'),{ probeType:3, mouseWheel: true }); bScroll.on("scroll",(position)=>{...
pc端应用时,默认只能鼠标拖动来实现滚动,鼠标是无法滚动的解决办法: this.wrapperScroll = new BScroll(this.$refs.wrapper, { click: true, //better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值...
import Bscroll from 'better-scroll' export default { name: 'CityList', props: { hot: Array, cities: Object, letter:String }, mounted () { this.scroll = new Bscroll(this.$refs.wrapper) }, updated () { this.scroll.refresh() } } @import '~styles/varibles.styl' .border-top...
better-scrollvantpopup移动端无法滚动 better-scrollvantpopup移动端⽆法滚动better-scroll vant popup 移动端⽆法滚动 实例化时添加属性 bindToWrapper: true this.$nextTick(() => { let bs = new BScroll(".popup-container", { bindToWrapper: true, });});