better-scroll无法滚动的问题。
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无法滚动的问题。的更多相关文章
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- taro scroll tabs 滚动标签 切换
taro scroll tabs 滚动标签 切换 https://www.cnblogs.com/lml-lml/p/10954069.html https://developers.weixin.q ...
- scroll 区域滚动
网页内都有快速滚动和回弹的效果: overflow: scroll; -webkit-overflow-scrolling: touch; 实际上,Safari用了原生控件来实现,对于有-webk ...
- window.scroll原生滚动
window.scroll({ top: , behavior: 'smooth' }) js原生已经支持模拟滚动的效果啦~~~
- Elasticsearch---基于scroll技术滚动搜索大量数据
如果一次性要查出来比如10万条数据,那么性能会很差,此时一般会采取用scoll滚动查询,一批一批的查,直到所有数据都查询完处理完 使用scoll滚动搜索,可以先搜索一批数据,然后下次再搜索一批数据,以 ...
- jQuery scroll(滚动)延迟加载
延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop = $( ...
- Android listView scroll 恢复滚动位置
相信大家尝试过许多方法恢复滚动位置,本人也找了许多方法,唯有这个方法好用,下面把代码贴出来 声明两个变量 private int mPosition; private int lvChildTop; ...
- WPF touch Scroll -触摸滚动
借鉴地址:http://matthamilton.net/touchscrolling-for-scrollviewer 改造后支持上下和左右鼠标拖动滚动: using System; using S ...
- Scroll文字滚动js
function ScrollImgLeft(){ var speed=50, doc=document, scroll_begin = doc.getElementById("scroll ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
随机推荐
- Vue组件通信
单向数据流通信 单向数据流通信是指父组件传递数据给子组件,子组件是不可以修改该数据的(可以改,但会警告) 父组件通过自定义属性传递数据给子组件,子组件使用props接收 如果想修改数据,子组件需要使用 ...
- Spring Cloud ----> 几个组件的总结
Spring Cloud Eureka 多个服务,对应多个Eureka Client 只有一个Eureka Server ,充当注册中心的角色每个Eureka Client 有ip 地址和端口号,它们 ...
- 2019.3.16数据结构考试(Problem 1. rotinv)(循环逆序对)
Problem 1. rotinvInput file: rotinv.inOutput file: rotinv.outTime limit: 2 secondsMemory limit: 256 ...
- 一条shell命令让多台Linux服务器执行
1.环境 局域网环境有3台Linux服务器,配置host文件 [root@master1 ~]# vim /etc/hosts 192.168.8.201 master1 192.168.8.202 ...
- (JavaScript)实现上传图片实时预览和(文件)大小判断
唉,为什么我一个做大数据和后端的要为前端耗尽心力啊??!! 昨天在做一个网页时遇到了一个问题,有一处需要插入图片,我原本的想法是获取到上传文件的URL,然后动态插入img标签,设置src为图片的URL ...
- 简易OA漫谈之工作流设计(五,直接上级)
规则引擎里比较复杂的问题就是:配置步骤的审批人. 某一个步骤由谁来审批,有很多复杂情况: 1.指定某一个具体的人.这种通常用于一些特殊的岗位,全公司只有一个,比如小公司里的财务,人事专员等. 2.指定 ...
- windows异步通知I/O模型
回声服务器端: #include <stdio.h> #include <stdlib.h> #include <WinSock2.h> #define BUF_S ...
- js的回调函数
介绍首先从英文介绍开始 A callback is a function that is passed as an argument to another function and is execut ...
- Linux c 获取cpu使用率(2)
上一篇博文当中,我们谈论了在Linux中如何获取执行命令行的结果,最终得到cpu的 使用率,但是十分不幸的事情是: 1)通过top -n 1 | grep Cpu获取的cpu使用率不会刷新,每次读取结 ...
- Unity中使用百度中文语音识别功能
下面是API类 Asr.cs using System; using System.Collections; using System.Collections.Generic; using Unity ...