快速解決jquery.touchSwipe左右滑動(dòng)和垂直滾動(dòng)條沖突
本文為大家分享了jquery.touchSwipe左右滑動(dòng)和垂直滾動(dòng)條沖突問(wèn)題的解決方法,具體內(nèi)容如下
正好需要Html5做一個(gè)左右可以切換的功能,但是要保留上下滾動(dòng)條功能。我在移動(dòng)端使用的jquery.touchSwipe插件,上網(wǎng)找了好久沒有看到對(duì)應(yīng)的解決方式,只能自己修改了,最后是能用了。
先上個(gè)圖:
解決方式是,我把左右滾動(dòng)的事件添加到了Body上面,而上下活動(dòng)的使用了DIV的垂直滾動(dòng)。上代碼:
$("#body").swipe( { fingers:'all', swipeLeft:swipe1, swipeRight:swipe2} ); function swipe1(event, direction, distance, duration, fingerCount) { tab_shipu(-1); //向左滑動(dòng)你要執(zhí)行的動(dòng)作 } function swipe2(event, direction, distance, duration, fingerCount) { tab_shipu(1); //向右滑動(dòng)你要執(zhí)行的動(dòng)作 }
然后上下滾動(dòng)條我設(shè)置div的滾動(dòng);
<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);
以上就是解決左右滑動(dòng)和垂直滾動(dòng)條沖突的方法,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jquery垂直公告滾動(dòng)實(shí)現(xiàn)代碼
- jQuery不間斷滾動(dòng)效果(模擬百度新聞支持文字/圖片/垂直滾動(dòng))
- jquery實(shí)現(xiàn)marquee效果(文字或者圖片的水平垂直滾動(dòng))
- jQuery 頂部導(dǎo)航跟隨滾動(dòng)條滾動(dòng)固定浮動(dòng)在頂部
- jquery實(shí)現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
- jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上
- jquery實(shí)現(xiàn)的導(dǎo)航固定效果
- jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果仿蘑菇街
- jQuery實(shí)現(xiàn)網(wǎng)頁(yè)頂部固定導(dǎo)航效果代碼
- 使用jQuery.Pin垂直滾動(dòng)時(shí)固定導(dǎo)航
相關(guān)文章
jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)換膚效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)換膚效果,結(jié)合完整實(shí)例形式分析了jQuery通過(guò)修改link標(biāo)簽的href屬性值實(shí)現(xiàn)換膚效果的相關(guān)技巧,需要的朋友可以參考下2016-09-09JQuery實(shí)現(xiàn)倒計(jì)時(shí)按鈕具體方法
頁(yè)面中需要實(shí)現(xiàn)某個(gè)按鈕點(diǎn)擊完后,禁用它,并顯示倒計(jì)時(shí)。這個(gè)默認(rèn)是3秒,代碼如下2013-11-11jquery實(shí)現(xiàn)樹形二級(jí)菜單實(shí)例代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)樹形二級(jí)菜單實(shí)例代碼,有需要的朋友可以參考一下2013-11-11淺析jquery數(shù)組刪除指定元素的方法:grep()
下面小編就為大家?guī)?lái)一篇淺析jquery數(shù)組刪除指定元素的方法:grep()。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery控制div實(shí)現(xiàn)隨滾動(dòng)條滾動(dòng)效果
這篇文章主要介紹了jQuery控制div實(shí)現(xiàn)隨滾動(dòng)條滾動(dòng)效果,對(duì)比分析了兩種實(shí)現(xiàn)方法供大家參考選擇,需要的朋友可以參考下2016-06-06分享一個(gè)自己動(dòng)手寫的jQuery分頁(yè)插件
本文主要是將自己動(dòng)手些jquery分頁(yè)插件的思路和步驟分享給大家,本分頁(yè)插件功能很簡(jiǎn)單,但是卻很實(shí)用,不想其他插件似的,功能一大堆。好了,廢話不多說(shuō),還是看正文吧2014-08-08分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件
這篇文章主要介紹了分享20款美化網(wǎng)站的 jQuery Lightbox 燈箱插件,需要的朋友可以參考下2014-10-10jQuery學(xué)習(xí)筆記之jQuery.extend(),jQuery.fn.extend()分析
給jQuery做過(guò)擴(kuò)展或者制作過(guò)jQuery插件的人這兩個(gè)方法東西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 這兩個(gè)屬性都是用于合并兩個(gè)或多個(gè)對(duì)象的屬性到target對(duì)象.2014-06-06Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單
這篇文章主要介紹了Jquery實(shí)現(xiàn)仿京東商城省市聯(lián)動(dòng)菜單的簡(jiǎn)單實(shí)例演示,可以選擇對(duì)應(yīng)省、市、縣,希望大家可以喜歡。2015-11-11