swiper 内容超出纵向滚动 解决办法

.swiper-slide {
    overflow: auto;
}
 
var swiper = new Swiper(‘.swiper-container‘, {
    direction: ‘vertical‘,
});
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

 
时间: 2025-01-05 06:14:09

swiper 内容超出纵向滚动 解决办法的相关文章

phpcms发布与生成内容页面空白的解决办法

phpcms发布与生成内容页面空白的解决办法 2014/10/14 技术文章评论:暂无评论浏览: 想换个CMS来用,所以新装了几个CMS系统,最后选定了PHPCMS.倒不是因为它非常优秀,而是因帝国的那种标签不太喜欢.顺便提一下,帝国CMS的栏目自定义字段,我觉得很好,如果用来做一个分类性的栏目,分类自身的属性可以自定义字段来实现,像一些游戏网站分区就很方便了.还是转回正题,使用PHPCMS创建好栏目,正要添加内容的时候,这时问题来了,弹出的添加内容页一片空白什么也没有.网上查了一下资料,有说是

录制输入富文本框内容无脚本生成解决办法

录制输入富文本框内容无脚本生成解决办法: 1.将富文本框加入到对象库中 2.编写脚本如下 'Browser("通用呼叫中心后台").Page("通用呼叫中心后台_2").Frame("Frame").WebElement("html tag:=p").Object.innerText="nei5555r" 改行为设置富文本框内容Browser("通用呼叫中心后台").Page("

防止表格被内容撑破的解决办法总结

默认情况下,设定了表格大小,看起来没什么问题,但当表格里装了很多比表格宽度要宽的内容时就会发现表格自然的被撑大了. 第一种情况是表格被英文单词撑破了.解决办法是在表格的属性里设置style="word-wrap:break-word;" 但其实还是有问题.当往表格里装一长串的英文字母时,表格还是会被撑破.这就是第2种情况了解决办法是在表格风格属性里再加一个属性.style="word-wrap:break-word;word-break:break-all;" 但还

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

错误截图: IndexOutOfRangeException: Array index is out of range.ZXing.Color32Renderer.Render (ZXing.Common.BitMatrix matrix, BarcodeFormat format, System.String content, ZXing.Common.EncodingOptions options)ZXing.BarcodeWriterGeneric`1[TOutput].Write (Sy

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

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

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

最近在初学android开发,在更新SDK的时候遇到了麻烦. 发现Extras文件夹下为空,没有内容,包括sdk列表也不全面,更新也没有反应 解决方法: 1.在SDK Manager下Tools->Options打开了SDK Manager的Settings a.在"HTTP Proxy Server"和"HTTP Proxy Port"输入框内填入mirrors.neusoft.edu.cn和80(东软的国内镜像,速度很快,腾讯的镜像速度也挺快的.) b.选

QTP录制脚本时,脚本内容为空的解决办法

在网上百度了一下,大多说的是以下方法: 打开IE,在菜单中选择[工具]/[Internet选项]进入Internet配置界面.选择[程序]/[管理加载项],查看目前加载的ActiveX的情况.当看到存在BHOManager Class并且其状态是"禁用"时,点击"启用"开启这个功能,并保存后退出即可解决问题. 当在管理加载项里找不到BHOManger Class这个加载项时,如果你安装了QTP,那么在C:\WINDOWS\system32下会存在一个叫BHOMana

linux中统计排序的内容含有空白行的解决办法

废话不多说,直接上实例: 文件 sharkyun.log 的内容如下 [[email protected] ~]# cat -n sharkyun.log 1http://www.sharkyun.com/index.html 2http://www.sharkyun.com/index.shtml 3https://post.sharkyun.com/index.html 4https://mp3.sharkyun.com/index.html 5http://www.sharkyun.com

织梦DeDeCms列表分页和内容页分页错位解决办法

文章页分页代码在这里/include/arc.archives.class.php列表页分页/include/arc.listview.class.php 很多入门的站长会碰到这样的问题,织梦的通病,下面秀站网总结了一下织梦的列表页和文章页分页问题,希望可以帮助到大家.主要修改两个文件一个是include/arc.listview.class,一个是修改CSS样式表. 第一,在CSS样式表里面添加如下代码: /*列表分页*/.page_list {padding:3px; margin: 3px