本质上就是对dom元素的位置的判断.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/swiper-4.3.5.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<title>Document</title>
<style>
html,
body {
width: 100%;
margin: 0;
padding: 0;
}
.main {
background-color: lightgrey;
overflow-y: scroll;
}
#show {
width: 100%;
background-color: aqua;
}
.top {
width: 100%;
height: 450px;
background-color: rgb(255, 0, 255);
}
.down {
width: 100%;
height: 200px;
background-color: rgb(0, 110, 255);
}
.down2 {
width: 100%;
height: 200px;
background-color: rgb(145, 255, 0);
}
.tips {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 200px;
overflow: hidden;
z-index: 100;
background-color: rgb(138, 138, 126);
}
</style>
</head>
<body>
<div class="tips">
</div>
<div class="main">
<div id="the" class="swiper-container">
<div class="swiper-slide top">Slide 1 450px</div>
<div class="down">Slide 21 200px</div>
<div class="down2">Slide 22 200px</div>
</div>
</div>
</div>
</body>
<script>
var __is_bottom_prev_obj = null; // 辅助判断滑动方向的对象
var is_bottom = function(jq_obj, y_val, y_threshold, callback, args) {
/*
* params jq_obj: 绑定滑动事件的元素的jQuery的对象.
* params y_val: 滑动事件中去取出来的触摸点的y坐标event.touches[0].clientY
* params callback: 回调函数, post和对dom的操作可以写在回调函数里
* params args: 回调函数的参数组成的列表
*/
try {
y_threshold = parseInt(y_threshold);
y_threshold = isNaN(y_threshold) ? 100 : y_threshold;
} catch (e) {
console.log(e);
y_threshold = 100; // 在到达底部后,再滑动多少距离就激活事件? 单位像素
}
callback = callback == undefined ? function(s) {
s = s == undefined ? '' : s;
alert(s);
} : callback;
args = args == undefined ? ["hello world"] : args;
// 判断是否到达底部?
var win_height = $(window).height(); // 页面窗口高度
var rect = jq_obj[0].getBoundingClientRect(); // 元素的宽高顶左的位置对象
var dom_top = rect.top; // 元素顶部
var dom_height = rect.height; // 元素高度.
if (win_height - (dom_top + dom_height) < 1) {
console.log("到达底部");
// 如果y_val的值在持续减小.而dom_top不变的话,那就是滑到页面的底部了.
if (__is_bottom_prev_obj == null) {
// 第一次有效的滑动到底部
__is_bottom_prev_obj = {
"y": y_val,
"date": new Date()
};
} else {
// 判断是否超时?滑动距离是否足够?
var old_y = __is_bottom_prev_obj['y'];
var old_date = __is_bottom_prev_obj['date'];
var now = new Date();
var delta = now - old_date; // 时间差, 毫秒
console.log("滑动间隔" + delta + "毫秒")
if (delta <= 200) {
// 连续的下滑动作,没有超时,检测滑动距离
var l = (old_y - y_val);
console.log("滑动距离" + l + "px")
if (l >= y_threshold) {
// 滑动距离足够
__is_bottom_prev_obj = null; // 重置辅助判断的对象.
callback.apply(null, args); // 激活回调函数
} else {
// pass
}
} else {
// 滑动间隔超时
__is_bottom_prev_obj = null; // 重置辅助判断的对象.
}
}
} else {
// 页面不在底部
if (__is_bottom_prev_obj == null) {
// pass
} else {
__is_bottom_prev_obj = null; // 重置辅助判断的对象.
}
}
}
var touch_it = function(selector, cb, args) {
/*
cb 回调函数
args 回调函数的参数数组
在touchmove事件中:
1. 根据触摸点的y坐标的变化,判断是在往上还是往下滑动屏幕.
*/
var $obj = $(selector);
$obj.on("touchstart touchmove", function(event) {
console.log(event);
var e_name = event.type; // 时间类型
var y = undefined; // 触摸点ｙ坐标
try {
y = event.originalEvent.touches[0].clientY; // touchend事件的touches属性是一个空的列表
} catch (e) {
console.warn("error!");
console.log(`type: ${e_name}`);
console.log(event.touches);
}
var dom_top = $obj.offset().top;
is_bottom($obj, y, null, cb, args);
var rect_top = $obj[0].getBoundingClientRect();
var e = $(`<div>type:${e_name}, y=${parseInt(y)}, h1=${dom_top}, h2=${rect_top.top}</div>`);
$(".tips").prepend(e);
});
};
// touch_it(".down2"); //直接调用原始函数
$.fn.extend({
pull_down: function(call_back, args) {
/*call_back 回调函数, args回调函数的参数的数组*/
touch_it($(this), call_back, args);
}
});
$(".down2").pull_down();
</script>
</html>
网友评论