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官网的 ...
随机推荐
- checked 全选 反选 示例
不多说看例子: 右上侧全选,然后每个栏又有一个栏目全选. 反选解决办法: function selectSubscibe(_class) { $("." + _class + &q ...
- 修改git的远程仓库命令
1. 修改命令 git remte origin set-url URL 2.先删后加 git remote rm origin git remote add origin git@github.co ...
- C++各种进制的转换
/* @author:CodingMengmeng @theme:各种进制之间的转换 @time:2017-1-6 21:39:08 @blog:http://www.cnblogs.com/codi ...
- hadoop2.6.4 搭建单机模式
注(要先安装jdk,最好jdk版本>=1.7) 安装jdk http://www.cnblogs.com/zhangXingSheng/p/6228432.html 给普通用户添加su ...
- windows下ThinkPHP3.2.3使用memcache缓存
准备 要使用memcache,首先要安装配置好memcache服务memcached: 下载http://downloads.northscale.com/memcached-win64-1.4.4- ...
- *****linux下redis安装
我用的系统是:redhat [root@infa ~]# wget http://download.redis.io/releases/redis-2.8.12.tar.gz tar xzf redi ...
- Python 修改电脑DNS
Pc电脑一般连网都是动态DHCP获取局域的IP地址,而且DNS服务器为自动获取地址.要修改DNS就要打开本地网络-本地连接- 属性- TCP/IP 手动修改DNS. 其实Python也可以通过WMI接 ...
- Chrome Extension 检查视图(无效)处理方法
最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码, ...
- WCF 学习篇
写在前面 自从运用了.NET Remoting 之后,就想系统的学习下WCF,因为WCF是对现有分布式通信技术的整合.主要以 <WCF全面解析> 这本书为主,园子的资料和网上资料为辅,来学 ...
- to_char函数
TO_CHAR 是把日期或数字转换为字符串,不能指定字符串长度. 使用TO_CHAR函数处理日期:TO_CHAR(number, '格式') eg:TO_CHAR(salary,'$99,999.99 ...