swiper 内容超出纵向滚动 解决办法
.swiper-slide {
overflow: auto;
}
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',autoHeight:true
});
var startScroll, touchStart, touchCurrent;
swiper.slides.on('touchstart', function (e) {
startScroll = this.scrollTop;
touchStart = e.targetTouches[0].pageY;
}, true);
swiper.slides.on('touchmove', function (e) {
touchCurrent = e.targetTouches[0].pageY;
var touchesDiff = touchCurrent - touchStart;
var slide = this;
var onlyScrolling =
( slide.scrollHeight > slide.offsetHeight ) && //allow only when slide is scrollable
(
( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom
( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top
( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle
);
if (onlyScrolling) {
e.stopPropagation();
}
}, true);
来源:https://github.com/nolimits4web/Swiper/issues/1467
swiper 内容超出纵向滚动 解决办法的更多相关文章
- 整屏纵向切换超出整屏内容纵向滚动 解决办法-fullpage
这个问题我也是研究了好久,百度了很多办法,swiper我始终没有找到合适的解决办法,所以我放弃了swiper,改用fullpage. fullpage里面有个scrollOverflow的属性: 并且 ...
- swiper插件 纵向内容超出一屏解决办法
1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- ScrollView嵌套ListView显示不完全、嵌套TextView不能滚动解决办法
目录: 一.情景说明 二.最初做法 三.解决办法 一.情景说明 1.情景 最近项目刚好有一个需求,需要在一个界面中用ScrollView嵌套一个滚动的TextView和一个listView ...
- bootstrap-table 表头和内容对不齐解决办法
偶然机会学习bootstrap,表格利用bootstrap-table实现,使用bootstrap-table过程中,发现了一个非常棘手的问题,在ie浏览器中,表格的表头和内容对不齐,特别是列比较多且 ...
- ZXing二维码生成在Unity3D中出错,数组超出界限的解决办法
错误截图: IndexOutOfRangeException: Array index is out of range.ZXing.Color32Renderer.Render (ZXing.Comm ...
- duv中内容不换行的解决办法
<div style='width: 100px;display:block;word-break: break-all;word-wrap: break-word;'> 内容超出div宽 ...
- echarts的axisLabel的文字内容过长的解决办法
通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导. 方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每 ...
- Android SDK Manager无法更新,内容显示不全的解决办法
最近在初学android开发,在更新SDK的时候遇到了麻烦. 发现Extras文件夹下为空,没有内容,包括sdk列表也不全面,更新也没有反应 解决方法: 1.在SDK Manager下Tools-&g ...
随机推荐
- C#随学随记
1.Microsoft.NET是基于Windows平台的一种技术(简称.NET),它包含了能在.NET Framework平台运行的所有语言..NET Framework是微软为开发应用程序创建的一个 ...
- idea集成git
这几天刚刚用了idea编辑器.用起来感觉相比eclipse有很大优势.其中我觉得特别引人注意的一个优势就是与git的集成开发.git作为一个代码维护的平台和idea结合使用对团队开发有很大意义.本人是 ...
- Python之通过IP地址库获取IP地理信息
利用第三方的IP地址库,各个公司可以根据自己的业务情况打造自己的IP地址采集分析系统.例如游戏公司可以采集玩家地区信息,进行有针对性的运营策略,还可能帮助分析玩家网络故障分布等等. #!/usr/bi ...
- 用hashMAP或ArrayList解决recylerView中checkbox的选择错乱问题。
//这个监听一定要放在checkbox初始化的方法之前,否则无效.是因为滑动的时侯会重新给checkbox赋值造成的.holder.cbFileSel.setOnCheckedChangeListen ...
- 【转】Struts1.x系列教程(2):简单的数据验证
转载地址:http://www.blogjava.net/nokiaguy/archive/2009/01/archive/2009/01/13/251197.html 简单验证从本质上说就是在服务端 ...
- html5+css3 微信开发-学习实例
例子1.控制数据只显示两行并且最后使用省略号 样式如下: .ControlDataRows{ overflow : hidden; text-overflow: ellipsis; display: ...
- js中cookie的使用
js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...
- linux权限,所有者、所在组、其他组(其他人员),chmod,chown
用户组 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用户所在的组 所有者 一般为文件的创建 ...
- Linux 执行ll命令时指定按文件时间或大小排序
按时间排序: $ ll -ht 按大小排序: $ ll -hS 使用--help查看命令的用法,如 $ ll --help
- 数据转换为json格式的方法
数据转换为json格式: 如果一张表中存在主外键关系,模板自动生成的类是不可以转换成JSON格式的,此时需要重新写一个类,类前面需加[DataContract],字段前需加[DataMember],实 ...