better-scroll无法滚动的问题
2017-11-11 23:34
1041 查看
总结一下目前为止碰到的better-scroll无法滚动的问题。
遇见better-scroll(以下简称:BS)无法滚动,可从两方面去考虑。
一是层级关系出错,二是计算高度出错。
1,层级关系
BS的基本结构是:一个wrapper层,一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。<div class="wrapper"> <div class="content"> content... </div> </div> new BS('wrapper');
简单点说,就是:wrapper站住位置,content在wrapper里面滚动。
自然,创建BS对象的时候传入的dom也该是wrapper。同时,wrapper里面不能存在多级div,也就是说,所有内容都需要被包含在一个content中。
检测此部分是否正确,只需要打开检查工具,查看content上是否被附加了一些用于滚动的额外的style。
style="pointer-events: auto; transition-property: transform; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"
2,页面高度计算
当层级关系检查无误但还是无法滚动,则建议打印BS对象查看一下。 关注两个变量:hasVerticalScroll和scrollerHeight。
如果hasVerticalScroll为false,则一定时wrapper和content计算高度时出错了。此时,对比下scrollerHeight和wrapperHeight,多半是前者小于等于后者。然后,手动修改hasVerticalScroll为true,会发现可以拖拽,但不是滚动。这是因为scrollerHeight计算错误。这就需要根据具体情况去查找原因了。
高度计算出错多半是因为dom没更新完就初始化BS。(BS必须在dom完成之后被初始化)
因此,注意所以影响dom高度变化的因素。包括:dom依赖绑定数据更新时,注意数据的传入。图片加载时,先把位置站好,不然也会导致出错。
3,当前遗留问题
BS初始化一切正常,但是底部有一小块无法显示。 可以肯定不是DOM初始化的问题,因为试过加入定时器延迟执行也无效。 而且scrollerHeight与content实际高度只差不到1px。 很奇怪!
相关文章推荐
- vue 中使用better-scroll插件时无法滚动问题
- better-scroll无法滚动
- 使用better-scroll时遇到已初始化但是页面无法滚动和点击的情况
- vue better scroll 无法滚动的解决方法
- VUEJS滚动插件BetterScroll使用时 无法滚动,但是已经捕获 demo
- better-scroll滚动不了的问题
- ScrollViewer的滚动问题(ScrollViewer里添加stackPanel,再加俩个listbox无法滚动的问题)
- 当tableview/scrollview滚动时定时器NSTimer / CADisplayLink停止响应问题
- 关于 HorizontalScrollView 横向滚动,显示不全问题。
- ion-content无法滚动问题
- 关于浏览器兼容的问题以及字符串编码的一个坑,鼠标滚动事件mousewheel和DOMMouseScroll
- JQuerymobile中使用iscroll5无法滚动的问题。
- better-scroll 遇到的问题 3 (transition-group 相关)
- vue滚动轴插件better-scroll使用详解
- 解决绝对定位层(position:absolute;)上无法触发滚动事件的问题
- screen模式下鼠标无法滚动【问题】
- 解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
- 表格无缝向上滚动demo.scrollTop始终为0问题解决
- 问题日记:对话框SCROLL滚动后重绘OnPaint的问题(空白,重复)的解决
- 解决 iframe 在 iPad 上无法滚动的问题