zoukankan      html  css  js  c++  java
  • 判断页面时向上滚动还是向下滚动

    <!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>
  • 相关阅读:
    Educational Codeforces Round 67 D. Subarray Sorting
    2019 Multi-University Training Contest 5
    Educational Codeforces Round 69 (Rated for Div. 2) E. Culture Code
    Educational Codeforces Round 69 D. Yet Another Subarray Problem
    2019牛客暑期多校训练第六场
    Educational Codeforces Round 68 E. Count The Rectangles
    2019牛客多校第五场题解
    2019 Multi-University Training Contest 3
    2019 Multi-University Training Contest 2
    [模板] 三维偏序
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7144477.html
Copyright © 2011-2022 走看看