快速解決jquery.touchSwipe左右滑動和垂直滾動條沖突
本文為大家分享了jquery.touchSwipe左右滑動和垂直滾動條沖突問題的解決方法,具體內(nèi)容如下
正好需要Html5做一個左右可以切換的功能,但是要保留上下滾動條功能。我在移動端使用的jquery.touchSwipe插件,上網(wǎng)找了好久沒有看到對應(yīng)的解決方式,只能自己修改了,最后是能用了。
先上個圖:
解決方式是,我把左右滾動的事件添加到了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í)行的動作 }
然后上下滾動條我設(shè)置div的滾動;
<div id="cook" class="cook"></div> <style> .cook{ overflow: auto; } </style>
設(shè)置body和div的默認(rèn)高度代碼:
$("body").css("height",document.body.scrollHeight); $(".cook").css("height",document.body.scrollHeight-$('#cook').position().top);
以上就是解決左右滑動和垂直滾動條沖突的方法,希望對大家的學(xué)習(xí)有所幫助。
- jquery垂直公告滾動實現(xiàn)代碼
- jQuery不間斷滾動效果(模擬百度新聞支持文字/圖片/垂直滾動)
- jquery實現(xiàn)marquee效果(文字或者圖片的水平垂直滾動)
- jQuery 頂部導(dǎo)航跟隨滾動條滾動固定浮動在頂部
- jquery實現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
- jquery實現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動固定屏幕最頂上
- jquery實現(xiàn)的導(dǎo)航固定效果
- jquery實現(xiàn)導(dǎo)航固定頂部的效果仿蘑菇街
- jQuery實現(xiàn)網(wǎng)頁頂部固定導(dǎo)航效果代碼
- 使用jQuery.Pin垂直滾動時固定導(dǎo)航
相關(guān)文章
淺析jquery數(shù)組刪除指定元素的方法:grep()
下面小編就為大家?guī)硪黄獪\析jquery數(shù)組刪除指定元素的方法:grep()。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件
這篇文章主要介紹了分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件,需要的朋友可以參考下2014-10-10jQuery學(xué)習(xí)筆記之jQuery.extend(),jQuery.fn.extend()分析
給jQuery做過擴(kuò)展或者制作過jQuery插件的人這兩個方法東西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 這兩個屬性都是用于合并兩個或多個對象的屬性到target對象.2014-06-06Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單
這篇文章主要介紹了Jquery實現(xiàn)仿京東商城省市聯(lián)動菜單的簡單實例演示,可以選擇對應(yīng)省、市、縣,希望大家可以喜歡。2015-11-11