1、css

  1. .swiper-slide {
  2.  
  3. overflow: auto;
  4. }

2、js

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

    U方法用于完成对URL地址的组装,特点在于可以自动根据当前的URL模式和设置生成对应的URL地址,格式为:U('地址','参数','伪静态','是否跳转','显示域名');在模板中使用U方法而不是固定 ...

  2. 在input中放对象

    var input = $("<input type='hidden' class='hidden-user'/>"); $(input).data("ran ...

  3. android 任意类 获得屏幕大小

    方法一 WindowManager managet=(WindowManager) context.getSystemService(Context.WINDOW_SERVICE); Display ...

  4. 使用java读取文件夹中文件的行数

    使用java统计某文件夹下所有文件的行数 经理突然交代一个任务:要求统计某个文件夹下所有文件的行数.在网上查了一个多小时没有解决.后来心里不爽就决定自己写一个java类用来统计文件的行数,于是花了两个 ...

  5. 弹出层提示,X秒后关闭

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  6. RSA算法学习

    package com.test.rsa; /* * 为了选择公钥和私钥,Bob必须执行如下步骤: * 1)选择两个大素数p和q.那么p和q应该多大呢?该值越大,RSA越难于破解,但是执行加密和解密所 ...

  7. TDD学习笔记【三】---是否需针对非public方法进行测试?

    前言 在Visual Studio 2012 中,针对Unit Test 的部分,有一个重要的变动: 原本针对「测试对象非public 的部分」,开发人员可通过Visual Studio 2010 自 ...

  8. 4.View绘制分析笔记之onDraw

    上一篇文章我们了解了View的onLayout,那么今天我们来学习Android View绘制三部曲的最后一步,onDraw,绘制. ViewRootImpl#performDraw private ...

  9. C/C++ 知识点1:内存对齐

    预备知识:基本类型占用字节 在32位操作系统和64位操作系统上,基本数据类型分别占多少字节呢? 32位操作系统: char : 1    int :4    short : 2    unsigned ...

  10. java 对List进行物理分页

    /* * To change this template, choose Tools | Templates * and open the template in the editor. */ pac ...