swiper插件 纵向内容超出一屏解决办法
1、css
.swiper-slide {
overflow: auto;
}
2、js
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);
完美解决
swiper插件 纵向内容超出一屏解决办法的更多相关文章
- CentOS7安装vncserver(启动失败及连接黑屏解决办法)
CentOS7安装vncserver(启动失败及连接黑屏解决办法) 转载weixin_34167043 最后发布于2017-11-09 15:11:00 阅读数 42 收藏 展开 AutoSAR入门 ...
- Mac开机黑屏解决办法
开机黑屏问题 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !import ...
- HTML中的select下拉框内容显示不全的解决办法
HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...
- ubuntu16.04命令行模式黑屏解决办法
ubuntu16.04命令行模式黑屏解决办法 问题描述 在ubuntu上装Nvidia的显卡驱动,需要关闭图形界面才能安装驱动,但是,出现如下情况: 使用“ctrl+alt+F1”命令进入命令行界面是 ...
- X5内核浏览器video自动全屏解决办法-canvas
最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...
- 遨游maxthon打开页面一片黑色,百度地图等黑屏解决办法
遨游maxthon使用webkit极速核心,打开百度地图等页面一片黑色,黑屏了. 找了好久,不知道什么问题. 版本一样,都是4.4.xxx版本.另外一台机器又正常. 后来上傲游社区,好多人也有这个问题 ...
- thinkcentre m8380t黑屏 解决办法
问题: 开机后,显示器上显示“无信号输入”,一直黑屏,但是主机的风扇.硬盘声音都正常. 解决办法: 把vga线等加紧了一些,屏幕还是不亮,然后我关掉插排电源,给cmos放了电,再重启就可以了. 这时需 ...
- bootstrap-table 表头和内容对不齐解决办法
偶然机会学习bootstrap,表格利用bootstrap-table实现,使用bootstrap-table过程中,发现了一个非常棘手的问题,在ie浏览器中,表格的表头和内容对不齐,特别是列比较多且 ...
- postman插件部分Header设置无效的解决办法
在使用chrome的postman插件模拟http请求的时候,碰到了设置的部分Headers无效的问题,比如说Referer设置后就无效,经过查询发现了问题原因,原因的具体说明参考postman官网的 ...
随机推荐
- java类加载器加载文件
例子:采用配置文件加反射的方式创建ArrayList和HashSet的实例对象. //第一种方式:类加载器加载文件 InputStream ips = ReflectTest2.class.getCl ...
- gl.h报错
以下内容摘自:http://blog.csdn.net/kaphen/article/details/24721999 头文件只有#include <gl\gl.h> //OpenGL H ...
- 远方的塔--Pylons
转自:https://en.wikipedia.org/wiki/Pylons_project#Pylons_Framework Pylons
- iOS 微信支付总结
1.支付流程 https://pay.weixin.qq.com/wiki/doc/api/app.php?chapter=8_3 商户系统和微信支付系统主要交互说明: 步骤1:用户在商户APP中选择 ...
- adb 的使用
打出log:adb logcat -s fliterName ps:(fliterName就是你的tag)
- UML大战需求分析——阅读笔记06
状态机图和活动图在样子比较相似,但状态机图是用来为对象的状态及造成状态改变的事件建模.我们大二学习UML统一建模语言状态机图模块时了解到,UML的状态机图主要用于建立对象类或对象的动态行为模型,描述系 ...
- SQL语法和运算符(一)
一个数据库通常包含一个或多个表.每个表由一个名字标识,表包含带有数据的记录(行). 一些最重要的SQL命令(SQL对大小写不敏感): 一.SQL语法 select:从数据库中提取数据 update:更 ...
- centos7下操作防火墙
引言 最近使用centos7系统比较频繁,在配置服务器的时候,总是遇到能够ping通服务器,但是就是没有办法访问80端口,这个时候我的直觉告诉我,肯定是防火墙的原因,但是使用iptables却怎么都找 ...
- Java面试常见知识点总结(二)
11.构造方法(构造器): 构造方法是一种特殊的方法,具有以下特点. (1) 构造方法的方法名必须与类名相同. (2) 构造方法没有返回类型,也不能定义为void,在方法名前面不声明方法类 ...
- webview页面缩放 & 自适应
0.webview页面自适应: // 1.LayoutAlgorithm.NARROW_COLUMNS : 适应内容大小// 2.LayoutAlgorithm.SINGLE_COLUMN:适应屏幕, ...