.swiper-slide {
overflow: auto;
}

1. 排除某些屏,不滚动

var startScroll, touchStart, touchCurrent;
var aSlide = Array.prototype.slice.call(swiper.slides);
aSlide.forEach(function(item,index){
  //按索引排除某些屏
if(index != 2){
item.addEventListener('touchstart', function (e) {
startScroll = this.scrollTop;
touchStart = e.targetTouches[0].pageY;
}, true);
item.addEventListener('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);
}
});

2. 按条件排除滚动,消除touchmove影响

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) {
var slide = this;
//排除条件
if($('#swiperWrapper>.swiper-slide-active').next().length == 0 && document.querySelector(self.template).contains(e.target)){
return;
}
touchCurrent = e.targetTouches[0].pageY;
var touchesDiff = touchCurrent - touchStart;
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单屏滚动的更多相关文章

  1. 原生js实现单屏滚动

    类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...

  2. fullpage 单屏高度超过屏幕高度,实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  3. FullPage.js – 轻松实现全屏滚动(单页网站)效果

    FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...

  4. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  5. swiper4实现的拥有header和footer的全屏滚动demo/swiper fullpage footer

    用swiper4实现的拥有header和footer的全屏滚动demo, <!DOCTYPE html> <html lang="en"> <head ...

  6. fullpage.js全屏滚动插件使用小结

    刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件 ...

  7. H5全屏滚动专题页最佳实践

    1.slip.js + rem.js 主要插件: slip.js github: https://github.com/binnng/slip.js rem.js 插件为阿里淘宝的 rem 实现的基础 ...

  8. 用JQ仿造百度书籍预售页面的单屏滚页效果

    今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上 ...

  9. 《fullPage.js》创建全屏滚动的网站

    插件介绍 fullPage.js是一个简单易用的插件,创建全屏滚动的网站(也被称为单页网站).它允许全屏滚动创建网站,以及添加内部滑块. 浏览器兼容性 主要功能 支持鼠标滚动 支持前进后退和键盘控制 ...

随机推荐

  1. javaweb基础(31)_国际化(i18n)

    一.国际化开发概述 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化(internationaliz ...

  2. vue-cli的build的文件夹下没有dev-server.js文件,怎么配置mock数据

    因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行 新版webpack.dev.conf.js配置如下: 在const portfin ...

  3. 搭建zipkin参数配置

    Environment Variables zipkin-server is a drop-in replacement for the scala query service. yaml confi ...

  4. 一道JS面试题所引发的"血案",透过现象寻本质,再从本质看现象

    觉得本人写的不算很烂的话,可以登录关注一下我的GitHub博客,新手写东西写的不好之处,还望见谅,毕竟水平有限,写东西只为交流提高,一起学习,还望大神多加指点,指出纰漏,和提出宝贵的意见,博客会坚持写 ...

  5. shell 流水账

    在shell脚本运行时,会先查找系统环境变量ENV,该变量指定了环境文件(加载顺序通常是/etc/profile ~/.bash_profile ~/.bashrc /etc/bashrc) 设置全局 ...

  6. vue layui

    关于 vue中使用layui插件,个人一些小小的心得. 我是全局的引入,在static文件夹里存放layui的完整代码 在index页面中标签引入 <link rel="stylesh ...

  7. Python9-MySQL数据库安装及基本操作-day42

    MySQL 单机程序(自己DB) 单机程序(共用DB)MySQL:用于管理文件的一个软件 -服务端软件 -socket服务端 -本地文件操作 -解析指令[SQL语句] -客户端软件(各种各样) -so ...

  8. Database returned an invalid datetime value. Are time zone definitions for your database installed?

    在做文章归档的会后,打印结果时报了这个错误 ret = models.Article.objects.filter(user=user).annotate(month=TruncMonth('crea ...

  9. VMWare workstation Pro 14 For Linux key

    VMWare workstation Pro 14 For Linux key: (我使用的Linux 系统是 Ubuntu16.04, 64位 ) 镜像是官方网址下载的,你也可以自己去官方网址下载: ...

  10. Compiler Error Message: CS0016: Could not write to output

    打开网页是报错: Server Error in '/' Application. Compilation Error Description: An error occurred during th ...