[web]better-scroll滚动无效几种原因

2018-08-10  本文已影响0人  hulaye

better-scroll 是一个移动端滚动的解决方案,使用的时候需注意一下问题:
一、DOM层级关系

<div class="wrapper">
  <div class="content">
    content...
  </div>
</div>

wrapper里面不能存在多个同级div,如果你这样写:

<div class="classifyTitle"  ref="wrapper">
    <div class="">
    ss
    </div>
    <ul>
    <li v-for="(item,index) in classifyData.products">
        <router-link :to="{name:'详情'}">{{item.title}}</router-link>
    </li>
    </ul>
</div>

那么ul中的元素将不能滚动

二、content是否被成功添加滚动相关style

三、wrapper 与 content 高度问题

只有content的高度大于wrapper高度时候,才可以滚动。

四、wrapper样式

.wrapper元素上要给定位

position: absolute;
left: 0;
top: 0;
overflow: hidden;
上一篇 下一篇

猜你喜欢

热点阅读