之前写的是用jq写的 过时了
被我删除了 现在的这个方法比较完善
说的再多 不如复制运行看一下效果吧
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<div class="btn">
<br />
scroll 事件本身会触发页面的重新渲染，<br />
同时 scroll 事件的 handler 又会被高频度的触发, <br />
因此事件的 handler 内部不应该有复杂操作，<br />
例如 DOM 操作就不应该放在事件处理中。<br />
针对此类高频度触发事件问题<br />
（例如页面 scroll ，屏幕 resize，监听用户输入等）<br />
，下面介绍两种常用的解决方法，防抖和节流。<br />
</div>
<div class="sc" id="sc">
</div>
<div class="sd" id="canmove">
固定的滚动穿透问题探索start<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索<br />
固定的滚动穿透问题探索end<br />
</div>
</head>
<body>
<style>
.btn{
height: 2000px;
position: relative;
border: 1px solid crimson;
border-bottom: 1px solid #000000;
font-size: 2rem
}
.sc{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.1);
position: fixed;
left:0;
top:0;
}
.st{
touch-action: none;
}
.sd{
width: 450px;
height: 450px;
overflow-y:scroll ;
border: 1px solid #000;
position: fixed;
left: 50%;
top: 50%;
color: #000;
z-index: 5;
font-size: 2rem;
transform:translate(-50%,-50%) ;
}
</style>
<script>
var firstY=0
var divEle = document.getElementById("canmove");
var divsc = document.getElementById("sc");
// 手指触碰到屏幕时触发
// divEle.addEventListener('touchstart',
// firstY=e.targetTouches[0].clientY
//
// })
//
divEle.addEventListener('touchstart', function (e) {
// 打印的事件对象
firstY=e.targetTouches[0].clientY
},false)
divsc.addEventListener('touchstart', function (e) {
// 打印的事件对象
console.log("222")
return e.preventDefault()
},false)
// consloe.log("firstY",firstY)
console.log("firstY",firstY)
divEle.addEventListener('touchmove', function (e) {
// let target =document.getElementById('canmove')
let target =divEle
var tdiv =target.classList.contains('st'); //return true or false
console.log("firstY2e",firstY)
let offsetHeight =target.offsetHeight,
scrollHeight =target.scrollHeight;
let changedTouches =e.changedTouches;
let scrollTop =target.scrollTop;
console.log("firstY2",firstY)
if(changedTouches.length>0){
let touch =changedTouches[0]||{};
let moveY =touch.clientY;
if(moveY >firstY&&scrollTop===0&&e.cancelable){// 滑动到弹窗顶部临界条件
e.preventDefault()
return false
}else if(moveY <firstY&&scrollTop +offsetHeight >=scrollHeight&&e.cancelable){
e.preventDefault()
return false
}
}
},false)
// divEle.addEventListener('touchstart', function (e) {
// // 打印的事件对象
// return e.preventDefault()
// })
</script>
</body>
</html>
中途出现了一次报错 解决了很久
.Ignored attempt to cancel a touchmove event with cancelable=false,scrolling is in progress and cann
解决步骤如下：
1.先在控制台找到报错代码的位置，以及文件目录位置
2.编辑器打开报错文件，找到报错位置，应该是在关于touchmove方法里，在执行e.preventDefault();e.stopPropagation();的if语句中加上一个条件判断 e.cancelable，就ok了
例如在我的报错index文件里是这样的
if (status !== '11' && this.direction === 'vertical' && !(parseInt(status, 2) & parseInt(direction, 2))&& e.cancelable) {
e.preventDefault();
e.stopPropagation();
}
参考地址
点击了解更多
报错解决问题的链接
点击了解更多
移动端滚动穿透的问题解决
https://blog.csdn.net/kingrome2017/article/details/80038410
