使用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, ...
随机推荐
- 【AtCoder】AGC016
A - Shrinking 用每个字母模拟一下就行 #include <bits/stdc++.h> #define fi first #define se second #define ...
- 【Android】AndroidManifest 中original-package标签
Manifest.xml 中 <manifest>标签中package属性用于设置应 用程序的进程名,即在运行时使用ddms查看到的进程名. <original-packag ...
- eclipse发布后在tomcat下没有文件夹,服务器的Server locations不能修改
主要是因为Server locations中的deploy路径不正确,要修改这个路径,需要移除服务器中的所有项目,然后点击清空,这时再双击服务器,既可修改这个设置.
- Python_面向对象_类2
类的几个装饰器方法: @classmethod (类方法):使之无法访问实例变量 class Animal(object): def __init__(self, name): self.name = ...
- BZOJ3944 Sum 数论 杜教筛
原文链接http://www.cnblogs.com/zhouzhendong/p/8671759.html 题目传送门 - BZOJ3944 题意 多组数据(组数<=10). 每组数据一个正整 ...
- 今天一起探讨shiro实现账户同一时刻session唯一
今天和同事在一起探讨shiro如何实现一个账户同一时刻只有一session存在的问题,下面小编把核心代码分享到博客园平台,需要的朋友参考下http://m.0834jl.com 今天遇到一个项目问题, ...
- Stm32串口通信(USART)
Stm32串口通信(UART) 串口通信的分类 串口通信三种传递方式 串口通信的通信方式 串行通信的方式: 异步通信:它用一个起始位表示字符的开始,用停止位表示字符的结束.其每帧的格式如下: 在一帧格 ...
- P2659 美丽的序列
P2659 美丽的序列对于当前的最小值,找到最大的左右边界,然后更新答案.用单调队列确定左右边界,O(n)做法. #include<iostream> #include<cstdio ...
- 002.Ceph安装部署
一 前期准备 1.1 配置规格 节点 类型 IP CPU 内存 ceph-deploy 部署管理平台 172.24.8.71 2 C 4 G node1 Monitor OSD 172.24.8.72 ...
- Java设计模式从精通到入门四 工厂方法模式
工厂方法模式 属于23中设计模式中创建型类型. 核心思想:工厂提供创建对象的接口,由子类决定实例化哪一个子类. 来源 设计模式之禅中的例子,女娲造人,通过八卦炉来进行造人,没有烧熟的为白人,烧太熟 ...