快速解决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 相关文章推荐
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
json字符串之间的相互转换示例代码
Aug 21 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
简单实现js拖拽效果
Jul 25 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
Vue组件Draggable实现拖拽功能
Dec 01 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
关于手调机和数调机的选择
2021/03/02 无线电
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
js使用递归解析xml
2014/12/12 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
实例解析Array和String方法
2016/12/14 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
python图像处理之反色实现方法
2015/05/30 Python
python实现按行切分文本文件的方法
2016/04/18 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python格式化输出%s和%d
2018/05/07 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
详解python中sort排序使用
2019/03/23 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
自我鉴定模板
2013/10/29 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
毕业论文致谢词
2015/05/14 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android