实现思路:
1、首先假如设置图标的类名为free_click 隐藏时候的添加类名img
.free_click{
position: fixed;
width: .59rem;
bottom: 1.7rem;
z-index: 5;
right: .05rem;
}
.free_click.img{
right: -.28rem;
}
2、触摸开始touchstart的时候图标隐藏
3、touchmove并且没有滚动到顶部或者顶部的时候,图标隐藏
4、触摸结束touchend并且滚动结束的时候,图标显示
首先我们封装一些常用的方法
var md_lib = {
hasClass:function(element,classname){
return element.className.match(new RegExp('(\\s|^)' + classname + '(\\s|$)'));
},
addClass:function(element,classname){
if (!this.hasClass(element, classname)) element.className += " " + classname;
},
removeClass:function(element,classname){
if (this.hasClass(element, classname)) {
var reg = new RegExp('(\\s|^)' + classname + '(\\s|$)');
element.className = element.className.replace(reg, ' ');
}
},
//获取滚动高度
getScrollTop: function() {
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if(document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
},
//获取当前可视高度
getClientHeight: function() {
return document.documentElement.clientHeight;
},
//获取文档完整的高度
getScrollHeight: function() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
},
//检查滚动高度是否到了底部,距离底部200时,认为到底,开始加载下一页
checkScrollHeight:function(){
return this.getScrollHeight() - this.getClientHeight() - this.getScrollTop() <= 200;
},
}
定义一些需要的变量
var free_icon = document.querySelector('.free_click');//获取图标
var timer = null;
var leave=false; //手指是否离开
var scrollStop=true;//滚动是否停止
实现方式
图标显示方法
function log(){
var free_icon = document.querySelector('.free_click');
if(leave==true && scrollStop==true) {
if(free_icon){
free_icon.className="free_click";
}
}
};
触摸开始的时候,设置leave=false,手指未离开屏幕
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 + md_lib.getClientHeight() >= md_lib.getScrollHeight() || now_scroll_top <= 0 ) {
//如果滚动到顶部或者顶部
return false;
}
if(free_icon){
md_lib.addClass(free_icon,'img');
}
},false);
滚动结束的时候,设置leave=true,手指离开屏幕,然后执行log方法,判断是否图标显示
document.addEventListener("touchend",function (event) {
if(event.touches.length==0||event.touches.length==2){
leave=true;
log();
}
},false);
判断滚动是否停止
window.onscroll=function(){
scrollStop=false;
clearTimeout(timer);
timer=setTimeout(function(){
scrollStop=true;
log();
},150);
}