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 ...
随机推荐
- 转:客制FORM调用会计科目弹性域/根据科目取得CODE_COMBINATION_ID
1.首先在创建数据表时,添一个字段用来保存会计科目的ID.如:CODE_COMBINATION_ID 2.在FORM相应的数据块增加两个ITEM,用来显示科目NUMBER与DESCRITION. 例: ...
- 2016年4月1日下午,《java入门123》翻开了第一页,从此走上不归路。新手初来乍到,献上见面礼
package copyfile; import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream ...
- LeetCode----326. Power of Three(Java)
package isPowerOfThree326; /* Given an integer, write a function to determine if it is a power of th ...
- Visual Studio的Web Performance Test提取规则详解(3)
总结 Visual Studio的Web Performance Test是基于HTTP协议层的,它不依赖于浏览器,通过直接接收,发送HTTP包来和Web服务器交互.Web Performance T ...
- C++string中有关字符串内容修改和替换的函数浅析
1.assign() 原型: //string (1) basic_string& assign (const basic_string& str); //substring (2) ...
- LabelControl文本居中显示
https://www.devexpress.com/Support/Center/Question/Details/Q94915 If you set the AutoSizeMode to Non ...
- InfoObject共享
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- python走起之第四话
本节大纲: 一:双层装饰器:一个函数可以被多层装饰器进行装饰,函数渲染(编译)从下到上,函数执行从上到下.如下程序: 1 #!/usr/bin/env python 2 #-*-coding:utf- ...
- 《BI项目笔记》创建多维数据集Cube(1)
有两个事实表,因此就有两个度量值组,并且向导将为非维度键的事实表中的每一个数值列创建一个度量值.由于我们这里不需要那么多,所以只选择部分度量值.另外要注意,度量值的名称源于事实表中的列,所有名称由可能 ...
- HTML5/CSS3hack
以下兼容技术我只测试了IE8+ Media Query 媒体查询 <script src="respond.min.js"></script> respon ...