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插件 纵向内容超出一屏解决办法的更多相关文章

  1. CentOS7安装vncserver(启动失败及连接黑屏解决办法)

    CentOS7安装vncserver(启动失败及连接黑屏解决办法) 转载weixin_34167043 最后发布于2017-11-09 15:11:00 阅读数 42  收藏 展开 AutoSAR入门 ...

  2. Mac开机黑屏解决办法

    开机黑屏问题 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !import ...

  3. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  4. ubuntu16.04命令行模式黑屏解决办法

    ubuntu16.04命令行模式黑屏解决办法 问题描述 在ubuntu上装Nvidia的显卡驱动,需要关闭图形界面才能安装驱动,但是,出现如下情况: 使用“ctrl+alt+F1”命令进入命令行界面是 ...

  5. X5内核浏览器video自动全屏解决办法-canvas

    最近在做手机端上面播放视频的项目,但是在安卓上面,video的播放是脱离页面,置于最顶层的,所以带来了很多问题,为了解决这个问题,查看了多方资料,写了下面简单的demo,方便以后使用. 下面就是运用c ...

  6. 遨游maxthon打开页面一片黑色,百度地图等黑屏解决办法

    遨游maxthon使用webkit极速核心,打开百度地图等页面一片黑色,黑屏了. 找了好久,不知道什么问题. 版本一样,都是4.4.xxx版本.另外一台机器又正常. 后来上傲游社区,好多人也有这个问题 ...

  7. thinkcentre m8380t黑屏 解决办法

    问题: 开机后,显示器上显示“无信号输入”,一直黑屏,但是主机的风扇.硬盘声音都正常. 解决办法: 把vga线等加紧了一些,屏幕还是不亮,然后我关掉插排电源,给cmos放了电,再重启就可以了. 这时需 ...

  8. bootstrap-table 表头和内容对不齐解决办法

    偶然机会学习bootstrap,表格利用bootstrap-table实现,使用bootstrap-table过程中,发现了一个非常棘手的问题,在ie浏览器中,表格的表头和内容对不齐,特别是列比较多且 ...

  9. postman插件部分Header设置无效的解决办法

    在使用chrome的postman插件模拟http请求的时候,碰到了设置的部分Headers无效的问题,比如说Referer设置后就无效,经过查询发现了问题原因,原因的具体说明参考postman官网的 ...

随机推荐

  1. zabbix安装配置界面点击next step没反应

    修改/var/lib/php/session/宿主或者添加777权限 看到有个人说这个不能用,一开始我也没用,找了各种方式都不行,最后死马当作活马医,改了下权限,卧槽,一下子就OK了,日

  2. markdown简介

    欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接 ...

  3. PLSQLDeveloper 常用设置

    PLSQL Developer常用设置及快捷键   1.登录后默认自动选中My Objects (已验证可用)   默认情况下,PLSQL Developer登录后,Brower里会选择All obj ...

  4. LL(1)文法

    <源程序>→<外部声明>|<外部声明><函数体> <外部申明>→<头文件><函数声明>|其他声明 <函数体&g ...

  5. java 多态和内部类

    接口跟接口之间存在继承关系 一个接口可以继承多个接口 一个非抽象类:必须实现接口中的所有方法 一个抽象类实现接口  可以不实现接口中的方法  但是继承与抽象类的类必须要是实现接口中的方法 多态:一个对 ...

  6. JS获取URL参数

    $(function () { var action = getUrlParam("action"); alert(action) }); //根据URL中的参数获取值 funct ...

  7. springMVC中 request请求数据绑定到Controller入参 过程剖析

    前言:Controller方法的参数类型可以是基本类型,也可以是封装后的普通Java类型.若这个普通Java类型没有声明任何注解,则意味着它的每一个属性都需要到Request中去查找对应的请求参数.众 ...

  8. MarkdownPad2 表格不显示处理

    1.添加表格的扩展 工具 >选项 > Markdown >Markdown处理器 改为 “Markdown(扩展)”即可. 2.在设置的过程中要注册markdownpad2 邮箱: ...

  9. 牛顿方法(Newton's Method)

    在讲义<线性回归.梯度下降>和<逻辑回归>中我们提到可以用梯度下降或梯度上升的方式求解θ.在本文中将讲解另一种求解θ的方法:牛顿方法(Newton's method). 牛顿方 ...

  10. expect命令问题1

    [root@localhost scripts]# cat exptest.sh #!/usr/bin/expect spawn ssh root@127.0.0.1 expect "pas ...