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>