项目中遇到的better-scroll的踩坑合集及搜罗的解决办法

Posted xuziwen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了项目中遇到的better-scroll的踩坑合集及搜罗的解决办法相关的知识,希望对你有一定的参考价值。

 

x1
>
<
>>
<<
O

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现。better-scroll 基于原生 JS 实现的,不依赖任何框架,所以使用起来也十分的方便。

注意点:

  1. 使用时better-scroll是作用在外层的wrapper容器上的,滚动的部分是content---需要注意的是,better-scroll只处理容器的第一个子元素,其他的元素会被忽略,如果里面需要滚动的部分有好几部分。一定要拿一个元素把他包裹起来
  2. 还有就是better-scroll初始化了,但是没法滚动。大家知道浏览器滚动的原理是页面的高度超过视口高度的时候,才会出现滚动条。也就是说父容器一定要有一个固定的高度并且溢出隐藏,子容器的高度要大于父元素的高度,才能滚动
  3. 滚动的原理
    1 element.style {
    2     transition-duration: 0ms;
    3     transform: translate(0px, 0px) scale(1) translateZ(0px);
    4     transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    5 }

    通过滑动的距离动态改变translate的值来实现,让它相对于父级移动,就有了一种滚动的效果,但是这里就又有了下一个坑

  4. 滚动元素里面的某一块元素的position:fixed失效,本来我们想实现一个效果是滚动到某一高度让它有个吸顶效果,但是它死活吸不上去,实验了几次后发现它的fixed是相对于它的父容器定位的---

    fixed定位的元素,如果父级有transform样式,值不为none,那么fixed定位就会失效,scale(),rotate()都会使fixed定位失效。

    解决方法:使用transform样式的元素,不要包含fixed定位的子元素;css3的新属性:flex;很好的解决了在transform下fixed失效的问题;也可以添加类和移除类

  5. 使用下拉加载的时候,一定不能把包裹子元素的容器重新渲染,这样滚动事件就会失效,因为你第一次初始化时给这个容器写上样式了,如果重新渲染的时候这些样式就会被覆盖,没有样式就不会滚动了,除非你再初始化一下这个容器,但是太麻烦不建议这样使用
  6. 当 DOM 结构发生变化的时候务必要调用refresh()确保滚动的效果正常,重新渲染高度
 

以上是关于项目中遇到的better-scroll的踩坑合集及搜罗的解决办法的主要内容,如果未能解决你的问题,请参考以下文章

Java项目生产环境部署,遇到FTP连接加密服务器的踩坑及爬坑过程

关于java常量的踩坑总结

关于django中间件使用的踩坑经历

RxDB:indexedDB的踩坑之路

vue项目中使用tinymce富文本的踩坑经历

记一次VueCLi生成项目中引入全局Scss文件的踩坑记录