Js判斷H5上下滑動方向及滑動到頂部和底部判斷的示例代碼

更新時間：2017年11月15日 09:38:17 作者：左上角的天空

下面小編就為大家分享一篇Js判斷H5上下滑動方向及滑動到頂部和底部判斷的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

向上滑動隱藏底部懸浮框，向下滑動顯示懸浮框。使用pc端瀏覽器查看請把瀏覽器設置為手機瀏覽器模式。

<!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 currntY = 0;
var lastY = 0;
var touch_screen = {
　　 //方向
  direction: {
	direction: "",
	object: null,

	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 direct = currntY - lastY;
		
        if (direct > 0) {
          self.direction = "down";
		  document.getElementById("nav").style.visibility="hidden";//隱藏
		} else if (direct < 0) {
		  self.direction = "up";
		  document.getElementById("nav").style.visibility="visible";//顯示
		} 

		if(currntY == 0){
		  self.direction = "top";
		} else if((currntY + window.screen.availHeight) == document.body.clientHeight){
		  self.direction = "bottom";
		  document.getElementById("nav").style.visibility="visible";//顯示
		}
        
        document.getElementById('nav').innerHTML= self.direction;
        //document.getElementById('nav').innerHTML= currntY + "|" + window.screen.availHeight + "|" + document.body.clientHeight;
		lastY = document.body.scrollTop;
      }, 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; background: #947674;text-align: center; position:fixed;left:0;bottom:0; } 
  #nav2 { width:100%; height: 50px; border: 1px solid #D4CD49;background: #947674;} 
  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>我與父親不相見已二年余了，我最不能忘記的是他的背影。 
    那年冬天，祖母死了，父親的差使也交卸了，正是禍不單行的日子。我從北京到徐州，打算跟著父親奔喪回家。到徐州見著父親,看見滿院狼藉的東西，又想起祖母，不禁簌簌地流下眼淚。父親說：“事已如此，不必難過，好在天無絕人之路！”  
    回家變賣典質，父親還了虧空；又借錢辦了喪事。這些日子，家中光景很是慘淡，一半為了喪事，一半為了父親賦閑。喪事完畢，父親要到南京謀事，我也要回北京念書，我們便同行。 
    到南京時，有朋友約去游逛，勾留了一日；第二日上午便須渡江到浦口，下午上車北去。父親因為事忙，本已說定不送我，叫旅館里一個熟識的茶房陪我同去。他再三囑咐茶房，甚是仔細。但他終于不放心，怕茶房不妥帖；頗躊躇了一會。其實我那年已二十歲，北京已來往過兩三次，是沒有什么要緊的了。他躊躇了一會，終于決定還是自己送我去。我再三回勸他不必去；他只說：“不要緊，他們去不好！” 
    我們過了江，進了車站。我買票，他忙著照看行李。行李太多了，得向腳夫行些小費才可過去。他便又忙著和他們講價錢。我那時真是聰明過分，總覺他說話不大漂亮，非自己插嘴不可，但他終于講定了價錢；就送我上車。他給我揀定了靠車門的一張椅子；我將他給我做的紫毛大衣鋪好座位。他囑咐我路上小心，夜里要警醒些，不要受涼。又囑托茶房好好照應我。我心里暗笑他的迂；他們只認得錢，托他們只是白托！而且我這樣大年紀的人，難道還不能料理自己么？  
    我說道：“爸爸，你走吧?！彼囃饪戳丝?，說：“我買幾個橘子去。你就在此地，不要走動?！蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去自然要費事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難?？墒撬┻^鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，我的淚很快地流下來了。我趕緊拭干了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了朱紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，自己慢慢爬下，再抱起橘子走。到這邊時，我趕緊去攙他。他和我走到車上，將橘子一股腦兒放在我的皮大衣上。于是撲撲衣上的泥土，心里很輕松似的。過一會兒說：“我走了，到那邊來信！”我望著他走出去。他走了幾步，回過頭看見我，說：“進去吧，里邊沒人?！钡人谋秤盎烊雭韥硗娜死铮僬也恢?，我便進來坐下，我的眼淚又來了。 
    近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨力支持，做了許多大事。哪知老境卻如此頹唐！他觸目傷懷，自然情不能自已。情郁于中，自然要發(fā)之于外；家庭瑣屑便往往觸他之怒。他待我漸漸不同往日。但最近兩年不見，他終于忘卻我的不好，只是惦記著我，惦記著我的兒子。 
    我北來后，他寫了一信給我，信中說道：“我身體平安，惟膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠矣。”我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知何時再能與他相見！ </p> 
<div id="nav" style="color:#F00; font-size:35px"></div>
    </div> 
  </div> 
<div id="nav2" ></div>
</body>
</html>

以上這篇Js判斷H5上下滑動方向及滑動到頂部和底部判斷的示例代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: