.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 内容超出纵向滚动 解决办法的更多相关文章

  1. 整屏纵向切换超出整屏内容纵向滚动 解决办法-fullpage

    这个问题我也是研究了好久,百度了很多办法,swiper我始终没有找到合适的解决办法,所以我放弃了swiper,改用fullpage. fullpage里面有个scrollOverflow的属性: 并且 ...

  2. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

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

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

  4. ScrollView嵌套ListView显示不完全、嵌套TextView不能滚动解决办法

    目录: 一.情景说明 二.最初做法 三.解决办法 一.情景说明 1.情景       最近项目刚好有一个需求,需要在一个界面中用ScrollView嵌套一个滚动的TextView和一个listView ...

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

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

  6. ZXing二维码生成在Unity3D中出错,数组超出界限的解决办法

    错误截图: IndexOutOfRangeException: Array index is out of range.ZXing.Color32Renderer.Render (ZXing.Comm ...

  7. duv中内容不换行的解决办法

    <div style='width: 100px;display:block;word-break: break-all;word-wrap: break-word;'> 内容超出div宽 ...

  8. echarts的axisLabel的文字内容过长的解决办法

    通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导. 方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每 ...

  9. Android SDK Manager无法更新,内容显示不全的解决办法

    最近在初学android开发,在更新SDK的时候遇到了麻烦. 发现Extras文件夹下为空,没有内容,包括sdk列表也不全面,更新也没有反应 解决方法: 1.在SDK Manager下Tools-&g ...

随机推荐

  1. webApp 开发技术要点总结

    如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webapp的开发已经有一段时间了,现把一些技巧分享给大家 ...

  2. s事件之event.preventDefault()与event.stopPropagation()的阻止默认事件和阻止事件冒泡的用法

    event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...

  3. install sublime for linux

    Download Your Free eBooks NOW - 10 Free Linux eBooks for Administrators Python API, that available f ...

  4. sql join 优化

    项目查询列表,需要新关联一张表,于是就让组下小伙更改了下sql语句,当再次进入列表查询时查询时间一下子就翻倍.那小伙找了半天没找原因. 于是我就打开代码查看,关联的一张表数据非常多,用的left jo ...

  5. XML 与 DataSet/DataTable 互相转换实例(C#)——转载

    // <summary>      /// XML形式的字符串.XML文江转换成DataSet.DataTable格式      /// </summary>      pub ...

  6. [转]MySQL5.6新特性之Multi-Range Read

    这几天看到mrr的东西,刚好看到以前我们组的一个小伙的博客,我看挺全的,就转过来了,原博客地址请戳 一 介绍    MySQL 5.6版本提供了很多性能优化的特性,其中之一就是 Multi-Range ...

  7. noi 1768 最大子矩阵

    题目链接:http://noi.openjudge.cn/ch0206/1768/ 可能是数据修改了吧,O(n6)过不了了. 主要是在求一个矩阵的和时,重复计算了很多次. 矩阵首先压缩一下.在输入的时 ...

  8. 服务器端查看log的shell脚本

    持续过滤log脚本 服务器端持续查看log的shell脚本(其中path1和path2替换为路径特征名,“tail -f”后面接的路径替换为路径特征名所对应的log文件路径): #! /bin/sh ...

  9. twemproxy - Proxy Server for Redis 安装测试

    1. 安装 (1) 系统环境 测试用的服务器为阿里云ECS,4核8G,CentOS6.3 64bit. 部署了3个Redis实例,监听端口号为7410,7420,7430,设置maxmemory为25 ...

  10. [问题2015S09] 复旦高等代数 II(14级)每周一题(第十教学周)

    [问题2015S09]  设 \(A,B\) 是 \(n\) 阶复矩阵, 满足 \(\mathrm{rank}(AB-BA)\leq 1\), 证明: \(A,B\) 可同时上三角化. 问题解答请在以 ...