使用iscroll,无法正常滑动的原因
iscroll的dom元素的结构是固定的,swiper是容器,scroll是需要滚动的容器,list是滚动的内容
<div class="swiper">
<div class="scroll">
<div class="list"></div>
</div>
</div>
tips:
1、swiper定位必须为relative,并且高度设置固定值,overflow:hidden;
2、swiper的高度一定要小于scroll的高度
3、初始化uiscroll时,元素必须是显示的状态,
4、如果底部还是无法拉上去,查看list中的每个item之间是否有padding,margin(如果是上下滑动,则查看上下),取消padding和margin
5、scroll 是你想要在多大的容器里滚动,list是真正要滚动的内容,所以scrollbar 设置为list
6、使用scroll 上下滚动到指定高度的时候,使用scrollTo,要判断最大的滚动距离maxScrollY,如果超出这个距离,会先滚到这个位置后再返回回去。
我的案例,页面中有个div容器,里面设置了两个tab,点击相互切换。div容器设置为隐藏,当点击页面中的某个按钮时,显示该div。我在页面渲染完成后,就初始化了iscroll,但是发现div滑动不了(只要一放手就回弹到初始位置)。
滚动不了的原因:初始化iscroll时,div是隐藏的状态,修改初始化的时机,当div显示后在初始化。
修改后,只有第一个tab,可以正常滑动,第二个依然无法正常滑动,原因同上,div显示时,只有第一个tab是显示的状态,所以在点击第二个tab时,需要再次初始化一次。
使用iscroll,无法正常滑动的原因的更多相关文章
- 关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发. 主要代码: window.onload=function(){ var myIscroll=new IScroll(".headerNav&quo ...
- iScroll.js 向上滑动异步加载数据回弹问题
iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...
- [转载]使用iscroll.js-tab左右滑动导航--tab点击无效果
转载自:http://blog.csdn.net/zuoyiran520081/article/details/77369421 最近在页面中用iscroll.js,但是但是有跳转,用a标签的hre ...
- iscroll遇到的两个坑
最近移动端闪付遇到的两个坑做下总结: 1.使用iscroll后,滑动并没有生效 解决方案: 首先要查看:结构是否正确: <div id="wrapper"> //w ...
- iScroll框架的使用和修改
iScroll 的诞生是因为手机 Webkit 浏览器(iPhone.iPod.Android 和 Pre)本身没有为固定宽度和高度的元素提供滚动内容的方法.这导致了很多网页使用 position:a ...
- iscroll 使用及遇到的问题
介绍: iscroll.js 是滑动事件.在手机上可以快速的滑动,用户体验很好.在线例子: 选择套餐 iScroll必须在调用之前实例化---用法 <script src="iscro ...
- ScrollView(RecyclerView等)为什么会自动滚动原理分析,还有阻止自动滑动的解决方案
引言,有一天我在调试一个界面,xml布局里面包含Scroll View,里面嵌套了recyclerView的时候,界面一进去,就自动滚动到了recyclerView的那部分,百思不得其解,上网查了好多 ...
- View的滑动冲突和解决方案
1.滑动冲突原因: 当有内外两层View同时可以滑动的时候,这个时候就会产生滑动冲突. 2.常见的冲突场景: 场景1: 场景2: 场景3: 4.解决方法种类: (1)外部拦截法: 针对场景1,我们可以 ...
- iscroll-lite.js源码注释
/*! iScroll v5.1.2 ~ (c) 2008-2014 Matteo Spinelli ~ http://cubiq.org/license */ (function (window, ...
随机推荐
- WCF+Autofac 实现构造函数依赖注入
1.新建一个项目 2.要对WCF服务实现Autofac注入,需要实现2个接口,IInstanceProvider与IServiceBehavior,并让实现IServiceBehavior的类成为一个 ...
- (Access denied for user 'root'@'slaver1' (using password: YES))
1.问题描述,启动azkaban的时候报如下所示的错误.之前使用azkaban是root用户,今天使用hadoop用户进行配置和使用,报这个错,说是root连接mysql拒绝了. [hadoop@sl ...
- [转]Maven与nexus关系
开始在使用Maven时,总是会听到nexus这个词,一会儿maven,一会儿nexus,当时很是困惑,nexus是什么呢,为什么它总是和maven一起被提到呢? 我们一步一步来了解吧. 一.了解Mav ...
- mysql基本操作(一)
1.登录mysql mysql -h localhost -u root -p 登录mysql,其中 -h是指定要连接mysql服务器的主机名 -u是指定用户 -次数登录必须用-p输入密 ...
- (二)Makefile——自动编译、清理、安装软件
每次都要敲击冗长的编译命令,每次都要清理之前的编译中间结果和最终结果,在安装软件时复制剪切大量的动态库,在卸载软件时删除很多的动态库和配置文件.好吧,我被逼向了makefile. helloworld ...
- Python_面向对象_类1
面向对象:减少重复代码,提高效率,比函数式编程更高效 类的创建: 实例属性又称:成员变量,成员属性(或者字段) 面向对象的三大特性: 一.封装 把客观事物封装为抽象的类,并对外只暴露一个可用接口 使用 ...
- css3实现旋转表
如图所示: css部分: <style> #clock{width:100px; height:100px; border-radius:50%; border:4px solid bla ...
- 51Nod 部分题目 の 口胡&一句话题解
原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod-One-Sentence.html 51Nod1404 先列出式子,然后搞成一个组合数.然后 luca ...
- P1233 木棍加工 dp LIS
题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间为1分钟: 如果刚处理 ...
- 20165235实验四 Android程序设计
20165235实验四 Android程序设计 实验课程:JAVA编程设计 实验名称:Android开发 姓名:祁瑛 学号:20165235 实验时间:2018.05.16 指导老师:娄家鹏 Andr ...