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官网的 ...
随机推荐
- ThinkPHP函数详解:U方法
U方法用于完成对URL地址的组装,特点在于可以自动根据当前的URL模式和设置生成对应的URL地址,格式为:U('地址','参数','伪静态','是否跳转','显示域名');在模板中使用U方法而不是固定 ...
- 在input中放对象
var input = $("<input type='hidden' class='hidden-user'/>"); $(input).data("ran ...
- android 任意类 获得屏幕大小
方法一 WindowManager managet=(WindowManager) context.getSystemService(Context.WINDOW_SERVICE); Display ...
- 使用java读取文件夹中文件的行数
使用java统计某文件夹下所有文件的行数 经理突然交代一个任务:要求统计某个文件夹下所有文件的行数.在网上查了一个多小时没有解决.后来心里不爽就决定自己写一个java类用来统计文件的行数,于是花了两个 ...
- 弹出层提示,X秒后关闭
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- RSA算法学习
package com.test.rsa; /* * 为了选择公钥和私钥,Bob必须执行如下步骤: * 1)选择两个大素数p和q.那么p和q应该多大呢?该值越大,RSA越难于破解,但是执行加密和解密所 ...
- TDD学习笔记【三】---是否需针对非public方法进行测试?
前言 在Visual Studio 2012 中,针对Unit Test 的部分,有一个重要的变动: 原本针对「测试对象非public 的部分」,开发人员可通过Visual Studio 2010 自 ...
- 4.View绘制分析笔记之onDraw
上一篇文章我们了解了View的onLayout,那么今天我们来学习Android View绘制三部曲的最后一步,onDraw,绘制. ViewRootImpl#performDraw private ...
- C/C++ 知识点1:内存对齐
预备知识:基本类型占用字节 在32位操作系统和64位操作系统上,基本数据类型分别占多少字节呢? 32位操作系统: char : 1 int :4 short : 2 unsigned ...
- java 对List进行物理分页
/* * To change this template, choose Tools | Templates * and open the template in the editor. */ pac ...