移动端返回顶部
功能:
滚动到某个地方显示
事件 scroll 页面滚动事件
代码:
<style>
* {
height: 800px;
}
.nav {
height: 200px;
background-color: aquamarine;
}
.icon {
display: none;
float: right;
width: 40px;
height: 40px;
padding-top: 250px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="nav">顶部</div>
<div class="icon">
<img src="images/home.png" alt="" />
</div>
<script>
var icon = document.querySelector(".icon");
var nav = document.querySelector(".nav");
//添加页面滚动事件
window.addEventListener("scroll", function () {
if (window.pageYOffset >= nav.offsetTop) {
icon.style.display = "block";
} else icon.style.display = "none";
});
//图标添加点击事件
icon.addEventListener("click", function () {
window.scroll(0, 0);
});
</script>
</body>
移动端click 延时解决方案
移动端click 事件会有300ms的延时问题,原因是移动端屏幕双击会缩放( double tap to zoom)页面
解决方案:
方案一:
禁止缩放,浏览器禁用默认的双击缩放行为并且去掉 300 ms 的点击延时
<meta name="viewport" content="user-scalable=no" />
方案二:
利用touch 事件自己封装这个事件解决
原理:
当手指触摸屏幕,记录当前触摸事件
当手指离开屏幕,用离开的时间减去触摸的时间
如果时间小于150ms ,并且没有滑动屏幕,那么定义为点击
代码如下:
//封装tap,解决click 300ms 延时
function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener('touchstart', function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener('touchmove', function (e) {
isMove = true;
// 看看是否有滑动,有滑动算拖拽,不算点击
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) {
// 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function(){ // 执行代码 });
- 方案三:使用插件。fastclick 插件解决300ms 延迟。
JS插件是一个JS文件
下载地址:GitHub官网地址.<script src="fastclick.js"></script> <!-- 引入fastclick插件 --> </head> <body> <script> // fastclick 插件的使用 if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } </script> </body>