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

時間 2019-12-08

標籤判斷 h5 上下滑動方向頂部底部欄目 JavaScript 简体版

原文原文鏈接

查看了一些文章資料親自操做了一下，網上有些文章你們都是互相轉發，有些都不去操做看看到底行不行，因此通常本身發的文章都是工做中遇到的，或者本身親自嘗試過的，把代碼貼出來分享給須要的朋友吧，若是有什麼問題歡迎補充javascript

<!DOCTYPE HTML>html

<html>java

<head>dom

<title>手機端觸屏手指滑動方向</title>spa

var touch_screen = {對象

　　 //方向ip

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 || document.documentElement.scrollTop;

}, false);

//拖動滑動時

move: function() {

var self = this;

if(lastY='defined'){

var lastY=document.body.scrollTop || document.documentElement.scrollTop;

}

self._object.addEventListener('touchmove', function(e) {

currntY = document.body.scrollTop || document.documentElement.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>

<p>

我說道：「爸爸，你走吧。」他望車外看了看，說：「我買幾個橘子去。你就在此地，不要走動。」我看那邊月臺的柵欄外有幾個賣東西的等着顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個胖子，走過去天然要費事些。我原本要去的，他不願，只好讓他去。我看見他戴着黑布小帽，穿着黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。但是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀着上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。這時我看見他的背影，個人淚很快地流下來了。我趕忙拭乾了淚。怕他看見，也怕別人看見。我再向外看時，他已抱了硃紅的橘子往回走了。過鐵道時，他先將橘子散放在地上，本身慢慢爬下，再抱起橘子走。到這邊時，我趕忙去攙他。他和我走到車上，將橘子一古腦兒放在個人皮大衣上。因而撲撲衣上的泥土，內心很輕鬆似的。過一下子說：「我走了，到那邊來信！」我望着他走出去。他走了幾步，回過頭看見我，說：「進去吧，裏邊沒人。」等他的背影混入來來每每的人裏，再找不着了，我便進來坐下，個人眼淚又來了。

近幾年來，父親和我都是東奔西走，家中光景是一日不如一日。他少年出外謀生，獨力支持，作了許多大事。哪知老境卻如此頹唐！他觸目傷懷，天然情不能自已。情鬱於中，天然要發之於外；家庭瑣屑便每每觸他之怒。他待我漸漸不一樣往日。但最近兩年不見，他終於忘卻個人很差，只是惦記着我，惦記着個人兒子。

我北來後，他寫了一信給我，信中說道：「我身體平安，唯膀子疼痛厲害，舉箸提筆，諸多不便，大約大去之期不遠矣。」我讀到此處，在晶瑩的淚光中，又看見那肥胖的、青布棉袍黑布馬褂的背影。唉！我不知什麼時候再能與他相見！ </p>

</div>

</body>

</html>