<!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=" 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=" 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="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="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="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>