快速解決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); //向左滑動你要執(zhí)行的動作
}
function swipe2(event, direction, distance, duration, fingerCount) {
tab_shipu(1); //向右滑動你要執(zhí)行的動作
}
然后上下滾動條我設置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);
以上就是解決左右滑動和垂直滾動條沖突的方法，希望對大家的學習有所幫助。
相關文章
這篇文章主要介紹了jQuery實現(xiàn)的網頁換膚效果,結合完整實例形式分析了jQuery通過修改link標簽的href屬性值實現(xiàn)換膚效果的相關技巧,需要的朋友可以參考下2016-09-09
頁面中需要實現(xiàn)某個按鈕點擊完后，禁用它，并顯示倒計時。這個默認是3秒，代碼如下2013-11-11
這篇文章主要介紹了jquery實現(xiàn)樹形二級菜單實例代碼，有需要的朋友可以參考一下2013-11-11
淺析jquery數(shù)組刪除指定元素的方法:grep()
下面小編就為大家?guī)硪黄獪\析jquery數(shù)組刪除指定元素的方法:grep()。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本文主要分享了jQuery實現(xiàn)彈幕效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery控制div實現(xiàn)隨滾動條滾動效果,對比分析了兩種實現(xiàn)方法供大家參考選擇,需要的朋友可以參考下2016-06-06
本文主要是將自己動手些jquery分頁插件的思路和步驟分享給大家，本分頁插件功能很簡單，但是卻很實用，不想其他插件似的，功能一大堆。好了，廢話不多說，還是看正文吧2014-08-08
分享20款美化網站的 jQuery Lightbox 燈箱插件
這篇文章主要介紹了分享20款美化網站的 jQuery Lightbox 燈箱插件,需要的朋友可以參考下2014-10-10
jQuery學習筆記之jQuery.extend(),jQuery.fn.extend()分析
給jQuery做過擴展或者制作過jQuery插件的人這兩個方法東西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 這兩個屬性都是用于合并兩個或多個對象的屬性到target對象.2014-06-06
Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單
這篇文章主要介紹了Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單的簡單實例演示，可以選擇對應省、市、縣，希望大家可以喜歡。2015-11-11