快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突


Posted in Javascript onApril 15, 2016

本文为大家分享了jquery.touchSwipe左右滑动和垂直滚动条冲突问题的解决方法,具体内容如下

正好需要Html5做一个左右可以切换的功能,但是要保留上下滚动条功能。我在移动端使用的jquery.touchSwipe插件,上网找了好久没有看到对应的解决方式,只能自己修改了,最后是能用了。

先上个图:

快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突

解决方式是,我把左右滚动的事件添加到了Body上面,而上下活动的使用了DIV的垂直滚动。上代码:

$("#body").swipe( { fingers:'all', swipeLeft:swipe1, swipeRight:swipe2} );
  function swipe1(event, direction, distance, duration, fingerCount) {
   tab_shipu(-1); //向左滑动你要执行的动作 
  }
         
  function swipe2(event, direction, distance, duration, fingerCount) {
    tab_shipu(1);  //向右滑动你要执行的动作
  }

然后上下滚动条我设置div的滚动;

<div id="cook" class="cook"></div>
<style>
  .cook{
    overflow: auto;
  }
</style>

设置body和div的默认高度代码:

$("body").css("height",document.body.scrollHeight);
$(".cook").css("height",document.body.scrollHeight-$('#cook').position().top);

以上就是解决左右滑动和垂直滚动条冲突的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
JavaScript入门基础
Aug 12 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
vue实现简单瀑布流布局
May 28 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 #Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 #Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
Apr 15 #Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 #Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 #Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 #Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 #Javascript
You might like
简单的PHP图片上传程序
2008/03/27 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
有关Promises异步问题详解
2015/11/13 Javascript
JS中的==运算: [''] == false —&gt;true
2016/07/24 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python性能优化技巧
2015/03/09 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
python修改list中所有元素类型的三种方法
2018/04/09 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
函数指针的定义是什么
2016/08/14 面试题
毕业生造价工程师求职信
2013/10/17 职场文书
产品售后服务承诺书
2014/05/21 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
关于运动会的口号
2014/06/07 职场文书
欢迎标语大全
2014/06/21 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技