之前寫的是用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
