在移动端浏览器上怎么实现当页面向上和向下滑动时隐藏
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在移动端浏览器上怎么实现当页面向上和向下滑动时隐藏相关的知识,希望对你有一定的参考价值。
参考技术A 一段行代码解决了问题,$(function()
$(window).bind('scroll', function()
var len = $(this).scrollTop()
if (len >= ***px)
$('#yourdiv').show();
else
$('#yourdiv').hide();
);
可以试试啊。
移动端判断手指向上滑动还是向下滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
//var dx = endX - startX;
var result = 0;
if(dy>0) {//向上滑动
result=1;
}else{//向下滑动
result=2;
}
return result;
}
//滑动处理
var startX, startY;
document.addEventListener(‘touchstart‘,function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
document.addEventListener(‘touchend‘,function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch(direction) {
case 0:
break;
case 1:
// 向上
alert("up");
break;
case 2:
// 向下
alert("down");
break;
default:
}
}, false);
以上是关于在移动端浏览器上怎么实现当页面向上和向下滑动时隐藏的主要内容,如果未能解决你的问题,请参考以下文章
移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);