Js判斷H5上下滑動方向及滑動到頂部和底部判斷

時間 2021-01-30

標籤 javascript html java 瀏覽器 dom ide 學習 this spa scala 欄目 JavaScript 简体版

原文原文鏈接

昨天一位作移動端H5開發的同事說，H5滑動方向要實時判斷向下仍是向上，但判斷是否滑動到底部時判斷有問題一直沒解決，因而就去問度娘，搜了不少資料，大部分有重複，因而根據你們的資料借鑑學習，在你們的基礎上寫了一個小例子。功能主要時能夠實時的判斷上下滑動的方向，是否滑動到底部或頂部來作某些事件觸發。例子中有使用到其餘博客上的內容，如原做者看到請勿怪，若是例子中有錯誤的請你們指正。若是使用pc端瀏覽器查看請把瀏覽器設置爲手機瀏覽器模式。javascript

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>手機端觸屏手指滑動方向</title>
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no,maximum-scale=1.0" id="viewport" name="viewport">
<script type="text/javascript">
var touch_screen = {
　　 //方向
    direction: {
	currntY: 0,
	lastY: 0,
	direction: "no",

	start: function() {
            var self = this,
                obj = self._object;
            obj.addEventListener('touchstart', function(e) {               
                self.move();
            }, false);
            obj.addEventListener('touchend', function(e) {
		self.move();
		lastY = document.body.scrollTop;
            }, false);
        },
        //拖動滑動時
        move: function() {
            var self = this;
	    self._object.addEventListener('touchmove', function(e) {
		currntY = document.body.scrollTop;
                var direction =  currntY - lastY;
		
                if (direction > 0) {
                    self._direction = "down";
		} else {
		    self._direction = "up";
		} 

		if(currntY == 0){
		    self._direction = "top";
		} else if((currntY + window.screen.availHeight) == document.body.clientHeight){
		    self._direction = "bottom";
		}
                
                document.getElementById('nav').innerHTML= self._direction;
                //document.getElementById('nav').innerHTML= currntY + "|" + window.screen.availHeight  + "|" + document.body.clientHeight;
            }, false);           
        },
       
        //經過一個dom對象進行初始化
        init: function(a) {
            var class_clone = function(source) { 
                var result={};
                for (var key in source) {
                    result[key] = typeof source[key]==="object" ? class_clone(source[key]) : source[key];
                } 
                return result; 
            }
            var self =  class_clone(touch_screen.direction);
            self._object = document.getElementById(a);
            if (!self._object) {
                alert('bind_object is not an object');
                return false;
            }
            self.start();
        }
    }
}

//頁面加載完成
window.onload = function() {
    touch_screen.direction.init("inner");
}
</script>

<style>  
    * {margin: 0;  padding: 0;}   
    #outer{ width:90%; height: 100%; background: #000; margin: auto;  overflow: hidden;}   
    #inner{width:80%;  background: #e4e4e4; margin: auto; position:relative; top:0px; font-size: 1em; padding: 30px 10px;  }   
    #inner p{line-height: 30px; letter-spacing: 3px; text-indent:2em;} 
    #nav { width:100%; height: 50px; border: 1px solid #D4CD49; text-align: center; position:fixed;left:0;top:30% } 
    h2{ width: 100%; text-align: center; }   
    h3{ width: 100%; padding-left:60%;}   
</style>  
</head>

<body>
<div id="spText2"></div>  
    <div id="outer">  
        <div id="inner">  
            <h2>背影</h2>  
            <h3>—朱自清</h3>  
                       <p>我與父親不相見已二年餘了，我最不能忘記的是他的背影。  
        那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子。我從北京到徐州，打算跟着父親奔喪回家。到徐州見着父親,看見滿院狼藉的東西，又想起祖母，不由簌簌地流下眼淚。父親說：「事已如此，沒必要難過，好在天無絕人之路！」   
        回家變賣典質，父親還了虧空；又借錢辦了喪事。這些日子，家中光景非常慘淡，一半爲了喪事，一半爲了父親賦閒。喪事完畢，父親要到南京謀事，我也要回北京唸書，咱們便同行。  
        到南京時，有朋友約去遊逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親由於事忙，本已說定不送我，叫旅館裏一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終於不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有什麼要緊的了。他躊躇了一會，終於決定仍是本身送我去。我再三回勸他沒必要去；他只說：「沒關係，他們去很差！」  
        咱們過了江，進了車站。我買票，他忙着照看行李。行李太多了，得向腳伕行些小費纔可過去。他便又忙着和他們講價錢。我那時真是聰明過度，總覺他說話不大漂亮，非本身插嘴不可，但他終於講定了價錢；就送我上車。他給我揀定了靠車門的一張椅子；我將他給我作的紫毛大衣鋪好座位。他囑咐我路上當心，夜裏要警醒些，不要受涼。又囑託茶房好好照應我。我內心暗笑他的迂；他們只認得錢，託他們只是白託！並且我這樣大年紀的人，難道還不能料理本身麼？   
        我說道：「爸爸，你走吧。」他望車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月臺的柵欄外有幾個賣東西的等着顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去天然要費事些。我原本要去的，他不願，只好讓他去。我看見他戴着黑布小帽，穿着黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀着上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，個人淚很快地流下來了。我趕忙拭乾了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了硃紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，本身慢慢爬下，再抱起橘子走。到這邊時，我趕忙去攙他。他和我走到車上，將橘子一古腦兒放在個人皮大衣上。因而撲撲衣上的泥土，內心很輕鬆似的。過一下子說：「我走了，到那邊來信！」我望着他走出去。他走了幾步，回過頭看見我，說：「進去吧，裏邊沒人。」等他的背影混入來來每每的人裏，再找不着了，我便進來坐下，個人眼淚又來了。  
        近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨力支持，作了許多大事。哪知老境卻如此頹唐！他觸目傷懷，天然情不能自已。情鬱於中，天然要發之於外；家庭瑣屑便每每觸他之怒。他待我漸漸不一樣往日。但最近兩年不見，他終於忘卻個人很差，只是惦記着我，惦記着個人兒子。 
        我北來後，他寫了一信給我，信中說道：「我身體平安，唯膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠矣。」我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知什麼時候再能與他相見！ </p>  
<div id="nav"  style="color:#F00; font-size:35px"></div>
        </div>  
    </div>  

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。