判断页面时向上滚动还是向下滚动
2017-07-10 10:08
246 查看
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
</head>
<body>
<p id="scroll" style="position: fixed;top: 0;left: 0;right:0;border: 1px red solid;"></p>
<div style="width: 100%;height: 2000px;border: 1px black solid;margin-top: 50px;"></div>
<script type="text/javascript">
var scrollTop=0,topValue=getScrollTop();
document.onscroll=function(e){
scrollTop = getScrollTop();
if(scrollTop<=topValue){
document.getElementById("scroll").innerHTML='向上滚动';
}
else{
document.getElementById("scroll").innerHTML='向下滚动';
}
setTimeout(function(){topValue=scrollTop;},0);
};
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
</script>
</body>
</html>仅限于pc端
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
</head>
<body>
<p id="scroll" style="position: fixed;top: 0;left: 0;right:0;border: 1px red solid;"></p>
<div style="width: 100%;height: 2000px;border: 1px black solid;margin-top: 50px;"></div>
<script type="text/javascript">
var agent = navigator.userAgent;
if (/.*Firefox.*/.test(agent)) {
document.addEventListener("DOMMouseScroll", function(e) {
e = e || window.event;
var detail = e.detail;
if (detail > 0) {
console.log("鼠标向下滚动");
} else {
console.warn("鼠标向上滚动");
}
});
} else {
document.onmousewheel = function(e) {
e = e || window.event;
var wheelDelta = e.wheelDelta;
if (wheelDelta > 0) {
console.log("鼠标向上滚动");
} else {
console.warn("鼠标向下滚动");
}
}
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/font/iconfont.css">
</head>
<body>
<div class="scroller-wrap" style="width:100%;height: 1900px;border: 1px red solid;">
</div>
<script>
var isStopScroolTimer=null;
var topValue=null;
//获取滚动高度
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
document.onscroll=function(){
if(isStopScroolTimer == null) {
isStopScroolTimer = setInterval("isStopScrool()", 100);
}
};
function isStopScrool() {
// 判断此刻到顶部的距离是否和1秒前的距离相等
if(getScrollTop() == topValue) {
console.log('滑动结束'+'滑动高度：'+getScrollTop());
clearInterval(isStopScroolTimer);
isStopScroolTimer=null;
} else if(getScrollTop() > topValue){
console.log("向上滚动");
topValue = getScrollTop();
}else if(getScrollTop() < topValue){
console.log("向下滚动");
topValue = getScrollTop();
}else{
topValue = getScrollTop();
}
}
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/font/iconfont.css">
</head>
<body>
<div class="scroller-wrap" style="width:100%;height: 1900px;border: 1px red solid;">
</div>
<script>
var startx, starty;
//获得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
//如果滑动距离太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
}
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
alert("未滑动！");
break;
case 1:
alert("向上！")
break;
case 2:
alert("向下！")
break;
case 3:
alert("向左！")
break;
case 4:
alert("向右！")
break;
default:
}
}, false);
</script>
</body>
</html><!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/font/iconfont.css">
</head>
<body>
<div class="scroller-wrap" style="width:100%;height: 1900px;border: 1px red solid;">
</div>
<script>
var starty;
//手指接触屏幕
document.addEventListener("touchstart", function(e) {
starty = e.touches[0].pageY;
}, false);
//手指离开屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endy = e.changedTouches[0].pageY;
if(endy>starty){
console.log("向上滑动");
}else if(endy<starty){
console.log("向下滑动");
}
}, false);
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS判断鼠标向上滚动还是向下滚动
- 如何判断uiscrollview是向上滚动还是向下滚动
- 如何判断uiscrollview是向上滚动还是向下滚动
- js判断鼠标滚动放下，向上滚还是向下滚？
- js判断鼠标滚动放下，向上滚还是向下滚？
- 判断我们手势 （上，下，左和右的判断） 向上还是向下 还是向左 向右
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
- jq判断滚动条向上还是向下
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
- 判断listview向上滚还是向下滚
- 判断TableView ScrollView 是向上滑动，还是向下滑动
- UIScrollView详解以及判断向上滑动还是向下滑动
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
- jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部
- ios 页面向上滚动显示toolbar 页面向下滚动隐藏toolbar
- iOS学习笔记之判断tableview向上还是向下滑动！
- 怎么判断页面是第一次打开还是刷新!
- JS 判断是页面是刷新还是关闭