需求说明：移动端页面滚动时，图标隐藏右侧；手指未离开屏幕时，图标隐藏右侧；只要当滚动结束并且触屏结束时，图标显示右下角。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>判断是否滚动结束</title>
<style>
#container{
height: 2000px;
}
img{
position: fixed;
right: 15px;
bottom: 100px;
transition: all .2s ease;
}
img.img{
right: -45px;
transition: all .2s ease;
}
</style>
</head>
<body id="body">
<div id="container">
</div>
<script>
var timer = null;
var leave=false;
var scrollStop=true;
//获取当前可视高度
function getClientHeight() {
return document.documentElement.clientHeight;
};
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
};
document.addEventListener("touchstart",function (event) {
leave=false;
},false);
document.addEventListener("touchmove",function (event) {
var free_icon = document.querySelector('.free_click');
var now_scroll_top = document.documentElement.scrollTop || document.body.scrollTop;
if (now_scroll_top + getClientHeight() >= getScrollHeight() || now_scroll_top <= 0 ){
return false;
}
free_icon.className="free_click img";
},false);
document.addEventListener("touchend",function (event) {
if(event.touches.length==0||event.touches.length==2){
leave=true;
log();
}
},false);
function log(){
var free_icon = document.querySelector('.free_click');
if(leave==true && scrollStop==true) {
free_icon.className="free_click";
}
};
window.onscroll=function(){
scrollStop=false;
clearTimeout(timer);
timer=setTimeout(function(){
scrollStop=true;
log();
},150);
}
</script>
</body>
</html>
网友评论