1. .swiper-slide {
  2. overflow: auto;
  3. }
  1.  
  1. var swiper = new Swiper('.swiper-container', {
  2. direction: 'vertical',autoHeight:true
  3. });
  4. var startScroll, touchStart, touchCurrent;
  5. swiper.slides.on('touchstart', function (e) {
  6. startScroll = this.scrollTop;
  7. touchStart = e.targetTouches[0].pageY;
  8. }, true);
  9. swiper.slides.on('touchmove', function (e) {
  10. touchCurrent = e.targetTouches[0].pageY;
  11. var touchesDiff = touchCurrent - touchStart;
  12. var slide = this;
  13. var onlyScrolling =
  14. ( slide.scrollHeight > slide.offsetHeight ) && //allow only when slide is scrollable
  15. (
  16. ( touchesDiff < 0 && startScroll === 0 ) || //start from top edge to scroll bottom
  17. ( touchesDiff > 0 && startScroll === ( slide.scrollHeight - slide.offsetHeight ) ) || //start from bottom edge to scroll top
  18. ( startScroll > 0 && startScroll < ( slide.scrollHeight - slide.offsetHeight ) ) //start from the middle
  19. );
  20. if (onlyScrolling) {
  21. e.stopPropagation();
  22. }
  23. }, true);

  来源:https://github.com/nolimits4web/Swiper/issues/1467

  1.  

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. Ajax请求中的async:false/true的作用

    async: false,(默认是true);false为同步,Ajax请求将整个浏览器锁死,只有tet.php执行结束后,才可以执行其它操作. 当async: true 时,ajax请求是异步的.但 ...

  2. Python快速建站系列-Part.Five.1-个人主页及发表文章

    |版权声明:本文为博主原创文章,未经博主允许不得转载. 现在的TSSS已经有了注册和登录的功能,首页的内容也填充好了,那这一节就完成用户个人主页的内容和发表文章功能的实现. 先完成用户个人主页的use ...

  3. android 手风琴

    引用:http://note.youdao.com/share/?id=994df799c2dcc8d83a8909173e42f80d&type=note 先看效果,过瘾一番. 源码下载:h ...

  4. AJAX-----01远古时期的ajax

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. python日志模块

    许多应用程序中都会有日志模块,用于记录系统在运行过程中的一些关键信息,以便于对系 统的运行状况进行跟踪.在.NET平台中,有非常著名的第三方开源日志组件log4net,c++中,有人们熟悉的log4c ...

  6. 【笔记】jquery hover的用法

    hover函数格式: $("A").hover(function(){ //当鼠标移入的时候执行第一个函数 },function(){ //当鼠标移出的时候执行第二个函数 }) * ...

  7. 如何使用double-check实现一个单例模式

    private object m_mutex = new object(); private bool m_initialized = false; private BigInstance m_ins ...

  8. minicom 使用教程

    因为现在电脑基本不配备串行接口,所以,usb转串口成为硬件调试时的必然选择.目前知道的,PL2303的驱动是有的,在dev下的名称是ttyUSB#. minicom,tkterm都是linux下应用比 ...

  9. Gcc的编译流程分为了四个步骤:

    http://blog.csdn.net/xiaohouye/article/details/52084770(转) Gcc的编译流程分为了四个步骤: 1.预处理,生成预编译文件(.文件): Gcc ...

  10. 微信小程序文件作用域模块引用

    文件作用域 在 JavaScript 文件中声明的变量和函数只在该文件中有效:不同的文件中可以声明相同名字的变量和函数,不会互相影响. 通过全局函数 getApp() 可以获取全局的应用实例,如果需要 ...