better-scroll无法滚动的问题。
1
遇见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计算错误。这就需要根据具体情况去查找原因了。

父级wrapper不能设height 100% , 否则scrollerHeight=wrapperHeight

高度计算出错多半是因为dom没更新完就初始化BS。(BS必须在dom完成之后被初始化)  $nextTick

better-scroll无法滚动的问题。的更多相关文章

  1. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  2. taro scroll tabs 滚动标签 切换

    taro scroll tabs 滚动标签 切换 https://www.cnblogs.com/lml-lml/p/10954069.html https://developers.weixin.q ...

  3. scroll 区域滚动

    网页内都有快速滚动和回弹的效果: overflow: scroll; -webkit-overflow-scrolling: touch;   实际上,Safari用了原生控件来实现,对于有-webk ...

  4. window.scroll原生滚动

    window.scroll({ top: , behavior: 'smooth' }) js原生已经支持模拟滚动的效果啦~~~

  5. Elasticsearch---基于scroll技术滚动搜索大量数据

    如果一次性要查出来比如10万条数据,那么性能会很差,此时一般会采取用scoll滚动查询,一批一批的查,直到所有数据都查询完处理完 使用scoll滚动搜索,可以先搜索一批数据,然后下次再搜索一批数据,以 ...

  6. jQuery scroll(滚动)延迟加载

    延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop = $( ...

  7. Android listView scroll 恢复滚动位置

    相信大家尝试过许多方法恢复滚动位置,本人也找了许多方法,唯有这个方法好用,下面把代码贴出来 声明两个变量 private int mPosition; private int lvChildTop; ...

  8. WPF touch Scroll -触摸滚动

    借鉴地址:http://matthamilton.net/touchscrolling-for-scrollviewer 改造后支持上下和左右鼠标拖动滚动: using System; using S ...

  9. Scroll文字滚动js

    function ScrollImgLeft(){ var speed=50, doc=document, scroll_begin = doc.getElementById("scroll ...

  10. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

随机推荐

  1. 在阿里云开源镜像站中下载centOS7

    镜像的选择 第一步.下载镜像 阿里云开源镜像站:http://mirrors.aliyun.com/ 选择centos进入 如下图: 如下图:选择centos7 再选择isos(镜像目录) 继续下一步 ...

  2. sunset

    may there be enough clouds in your life to make a beautiful sunset

  3. vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值

    首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...

  4. 虚拟机中安装Linux系统

    本教程的运行环境:Windows 10 , 虚拟机 VirtualBox,Ubuntu 16.04 1.准备 下载 VirtualBox 下载OVA镜像64位 http://releases.ubun ...

  5. XV Open Cup named after E.V. Pankratiev. GP of Siberia-Swimming

    给出两个点,找到过这两个点的等角螺线,并求出中间的螺线长 $c = \frac{b}{a}$ $p = a \times c^{\frac{\theta}{angle}}$ 对弧线积分 #includ ...

  6. CSAPP之阅读笔记-计算机系统漫游(1)

    最近在看CSAPP(深入理解计算机系统第二版),其实最新版是第三版.但是,我看了一下价格100多大洋,于是去老夫子旧书网上买了本第二版的,花了30多块钱.哈哈. 网上看了一些关于此书的书评,都说是本好 ...

  7. php遍历数组7种方式(严格说是五种)

    数组: $arr = array(1,2,3,4,5); 第一种:foreach (最常见的) foreach ($arr as $v){ echo $v;} 第二种:for for($i=0;$i& ...

  8. python day1 之三级菜单的正确姿势

    看了几个同学有关三级菜单的实现,都是通过一级一级输出,是较为过程的实现.另外如果菜单(树形结构)更多级这样处理起来就比较麻烦了. 可以使用python强大的列表和字典,实现的更优美或简洁一些: 注:复 ...

  9. AngelToken钱包——值得投资与存币的钱包

    Angeltoken有多好? Angeltoken到底值不值得我们投资? 简而言之 Angeltoken结合了:钱包+机器人,钱包+币币交易,钱包+宠物,钱包+结算代币等等. 它颠覆传统的运营和赚钱模 ...

  10. Html+css学习笔记一 创建一个网页

    第一个网页 新建一个记事本,把名字改成first.html <html> <head> <title>MyFristHtml</title> </ ...