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官网的 ...
随机推荐
- IDEA 配置 tomcat的数据源
1.F4打开module setting面板,找到facets 配置项,这个配置项非常重要,里面可配置tomcat加载的web.xml和context.xml文件所在的路径,部署的时候IDEA会自动读 ...
- 基于TXT文本的简单图书管理系统
1 ////////////////////////////////////////////////////////////////////////////////////// //SqList.h ...
- [转]加速Android Studio/Gradle构建
加速Android Studio/Gradle构建 android android studio gradle 已经使用Android Studio进行开发超过一年,随着项目的增大,依赖库的增多, ...
- SQLServer 2008 R2 对同时含有数字和中文的字段进行排序
若是数据库中的某一个字段名为bedNO,类型为nvchar,里面有{1,2,3,11,12,23,加2,加3}这些数据. 此时我需要对这些数据进行排序,数字按大小拍前面,汉字按第一个字拼音首字母的顺序 ...
- Java笔记:修饰符
Synchronized 修饰符 Synchronized 关键字声明的方法同一时间只能被一个线程访问.Synchronized 修饰符可以应用于四个访问修饰符. 实例 public synchron ...
- 数据库SQL语句优化小结
网上查找的总结: 1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如: select id from t where num is null ...
- 二.TimesTen原理及应用场景
声明:本文章转自麻袋爸爸 一,TimesTen应用场景 在谈论TimesTen内存数据库应用场景之前,我们先来介绍一下什么是内存数据库,及其工作原理吧.内存数据库,顾名思义就是将数据存放在内存中,并通 ...
- DDD建模案例----“视频课程”场景
接触领域驱动设计DDD有一年多的时间了,中间看过不少书,参与过一些讨论(ENode QQ群).目前对DDD的认知还停留在理论阶段,所以对领域建模非常感兴趣,这里说的建模是指以DDD的思想为指导再加上D ...
- ExtJS 中类的继承
ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现.接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Developer类,它继承自Person,同时还拥有Coding方 ...
- for循环每次取出一个字符(不是字节)
python3.5 for循环每次取出一个字符(不是字节) #!/usr/bin/env python # -*- coding:utf-8 -*- my_str = "我是哈哈" ...