快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
更新时间：2016年04月15日 14:22:31 投稿：lijiao
这篇文章主要介绍了快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突问题，感兴趣的小伙伴们可以参考一下
本文为大家分享了jquery.touchSwipe左右滑动和垂直滚动条冲突问题的解决方法，具体内容如下
正好需要Html5做一个左右可以切换的功能，但是要保留上下滚动条功能。我在移动端使用的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);
以上就是解决左右滑动和垂直滚动条冲突的方法，希望对大家的学习有所帮助。
相关文章
2013-11-11
详解Bootstrap的iCheck插件checkbox和radio
这篇文章主要详细介绍了Bootstrap的iCheck插件checkbox和radio的知识及bootstrap icheck获取radio的value值的方法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧2016-08-08
页面上经常会有弹窗，有的弹窗是动态生成的，有的弹窗是在页面底部隐藏的，对于动态生成的弹窗，如果要监听弹窗的事件，可以使用jQuery的事件绑定on()方法实现2016-04-04
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
css()方法设置或返回被选元素的一个或多个样式属性,下面有几个不错的示例，大家可以感受下2014-01-01
这篇文章主要介绍了jQuery通用的全局遍历方法$.each()用法,结合实例形式分析了$.each()方法实现遍历功能的相关技巧,需要的朋友可以参考下2016-07-07
前阵子接到个需求，联通网上营业厅经常需要专题页面做宣传，但是由于专题页面会有按钮，以及各个图片的链接，省分的人没有html基础，没人维护，量又比较大，需要开发出一个可自定义图片热区链接的后台，于是就有了这个2012-07-07
这是一款基于jQuery的滑动杆购买日期选择插件，它的外观仿的是阿里云的服务器购买日期选择界面。这款jQuery插件非常适合在一些虚拟产品购买页面上使用，它可以帮助你的用户快速选择产品的购买日期，感兴趣的朋友跟着小编学习吧2015-09-09
本文给大家介绍bootstrap无限级分类jq拓展之前的无限级分类的封装版的知识，非常不错具有参考借鉴价值，感兴趣的朋友一起看下吧2016-08-08
这篇文章主要介绍了jQuery带时间的日期控件，选择的时间可精确到分钟,很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
最新评论