移动端怎么用JS判断是手势是向上滑动还是向下滑动

JavaScript07

移动端怎么用JS判断是手势是向上滑动还是向下滑动,第1张

var divTwo = $('.divTwo')

//1.禁用div的滚轮事件

$('.divTwo').mousewheel(function (e) {

return false

})

//2.如果滚动条到底底部的时候 禁用window的滚轮滚动

//3.判断滚动的方向

divTwo.mousewheel(function (e, delta) {

var decoration = delta > 0 ? 'Up' : 'down'

$('.divFixed').text(decoration)

var scrollTop = divTwo.scrollTop()

var scrollHegiht = divTwo[0].scrollHeight

var height = divTwo.height()

//滚动条 到底部且 滚轮向下滚动

if (scrollTop + height >= scrollHegiht && delta < 0) {

e.preventDefault()

}

//滚动条 到顶部 且滚轮向上

else if (scrollTop == 0 && delta > 0) {

e.preventDefault()

}

})

$(document).mousewheel(function (e, delta) {

$('.divFixed').text(delta)

})

有一个mousewheel.js插件可以实现你说的功能。这是你需要的判断向上或者向下滚动的代码。希望对你有帮助,或者你直接百度一下mousewheel看一下具体的代码。

LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam) { int delta //一次滑动量 TCHAR szMessage[120]static int time //最后一次滚动时的时间值 static int start //第一次滚动前的刻度值 static int index=10 //最后一次滚动后的刻度值 static BOOL bStart=FALSE //是否第一次滚动鼠标 switch (message) { case WM_CREATE: SetTimer(hWnd,500,500,NULL)breakcase WM_MOUSEWHEEL: delta=GET_WHEEL_DELTA_WPARAM(wParam)if(delta>0) { int line=delta/40if(line+index<=100) //放大位图逻辑 { if(!bStart) { start=index //记录第一次刻度值 } index+=line //刷新最近刻度值 _stprintf(szMessage,_T("向上滚动%d行\n"),line)time=GetTickCount() bStart=TRUEOutputDebugString(szMessage) } } else{ int line=-delta/40if(index-line>=0) //缩小位图逻辑 { if(!bStart) start=indexindex-=line _stprintf(szMessage,_T("向下滚动%d行\n"),line)time=GetTickCount() //刷新当前时间值 bStart=TRUEOutputDebugString(szMessage) } } breakcase WM_TIMER: { int tick=GetTickCount()if(bStart &&tick-time>500) //如果前后两次滚动事件超过半秒,开始绘图 { bStart=FALSEint sub=index-start//sub为正放大位图,为负缩小位图 TCHAR szMess[100]_stprintf(szMess,_T("尺寸改变了%d个单位 当前刻度%d\n"),sub,index)OutputDebugString(szMess)//执行绘图 } } break case WM_DESTROY: ::KillTimer(hWnd,500)PostQuitMessage(0)breakdefault: return DefWindowProc(hWnd, message, wParam, lParam)} return 0}

1:使用js的插件 目前主流的js库 比如jq 也有手势的插件,

2:还有移动端的zepto库 也有手势插件,

3:另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库,

4:早期的应该是用wml语言支持的WMLScript实现。

5:举例:使用iscroll.js实现

1)下载iScroll.js,百度搜索iScroll.js下载即可

2)引入iScroll.js,在要使用滑动效果的地方,引入iScroll.js文件

3)编写规范的html格式

只有如下格式才能实现滑动效果

<div id="wrapper">

<div class="scroll">

这个区域可以滑动

</div>

</div>

如下格式不能滑动

<div id="wrapper">

<div class="other">这个区域可以滑动</div>

<div class="scroll">

这个区域不可以滑动了

</div>

</div>

只有wrapper的第一个子元素才能实现滑动效果。

4)编写js调用代码

var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false})

第一参数必需是滑动元素的父元素的id。

主要参数一览:

hScroll: true, 左右滑动,默认为true

vScroll: true,上下滑动

hScrollbar: true, 是否显示y轴滚动条,默认为显示

vScrollbar: true,是否显示X轴滚动条,默认为显示