原生js实现手机端上下滑动一次一屏
一次项目没看见UI写的注释,发现一个响应式网站需要实现在手机端的时候屏幕滑动一下,滚动一屏,当时已经快要写好,不想使用swiper重写,懒得码页面,就想用js控制屏幕滚动。网上找了一堆,控制dom干啥的,还是得改页面加类名。就自己写了一个。
思路:获取当前设备高度,文档距顶部的高度scrolltop,监听手指滑动事件,滑动超过一段距离判断值的正负来确定是上滑,还是下滑,用scrolltop来加减当前设备高度。下面上代码,直接新建一个js文件,复制粘贴,引入页面就可以了。
window.onload = function(){
const body = document.body
body.addEventListener('touchstart', function(event) {
// event.preventDefault();
var touch = event.targetTouches[0];
//滑动起点的坐标
startX = touch.pageX;
startY = touch.pageY;
// console.log("startX:"+startX+","+"startY:"+startY);
});
body.addEventListener("touchmove", function(event) {
var touch = event.targetTouches[0];
//手势滑动时,手势坐标不断变化,取最后一点的坐标为最终的终点坐标
endX = touch.pageX;
endY = touch.pageY;
// console.log("endX:"+endX+","+"endY:"+endY);
})
body.addEventListener("touchend", function(event) {
var distanceX = endX - startX,
distanceY = endY - startY;
// console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
//移动端设备的屏幕宽度
// var clientHeight = document.documentElement.clientHeight;
var clientHeight = window.innerHeight
console.log(clientHeight*0.1);
console.log(distanceY);
//判断是否滑动了,而不是屏幕上单击了
if (startY != Math.abs(distanceY)) {
//在滑动的距离超过屏幕高度的20%时,做某种操作
// console.log('滑动',Math.abs(distanceY))
if (Math.abs(distanceY) > 5) {
console.log(distanceY)
//向下滑实行函数someAction1,向上滑实行函数someAction2
distanceY < 0 ? someAction1() : someAction2();
}
}
startX = startY = endX = endY = 0;
})
// 向上滚动
function someAction1(){
const height = window.innerHeight
const allheight = document.body.scrollHeight
const scrolltop = document.documentElement.scrollTop
if(scrolltop*1 + height*1 > allheight*1){
window.scrollTo({
top: allheight*1 - height*1,
behavior:'smooth'
});
// console.log('触底操作')
}else{
window.scrollTo({
top: scrolltop*1 + height*1,
behavior:'smooth'
});
// console.log('向上滚动操作')
}
}
function someAction2(){
const height = window.innerHeight
const scrolltop = document.documentElement.scrollTop
if(scrolltop*1-height*1 < 0){
window.scrollTo({
top: 0,
behavior:'smooth'
});
// console.log('触顶操作')
}else{
window.scrollTo({
top: scrolltop*1 - height*1,
behavior:'smooth'
});
// console.log('向下操作')
}
}
}
代码有啥不足之处,欢迎各位老哥提点~~
参考文章:https://www.jb51.net/article/126851.htm