html5 移动端滑动效果,移动端 H5 滑动穿透 （完美解决）

之前写的是用jq写的 过时了

被我删除了 现在的这个方法比较完善

说的再多 不如复制运行看一下效果吧

image.png

scroll 事件本身会触发页面的重新渲染，

同时 scroll 事件的 handler 又会被高频度的触发,

因此事件的 handler 内部不应该有复杂操作，

例如 DOM 操作就不应该放在事件处理中。

针对此类高频度触发事件问题

(例如页面 scroll ，屏幕 resize，监听用户输入等)

，下面介绍两种常用的解决方法，防抖和节流。

固定的滚动穿透问题探索start

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索

固定的滚动穿透问题探索end

.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%) ;

}

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 =scrollHeight&&e.cancelable){

e.preventDefault()

return false

}

}

},false)

// divEle.addEventListener('touchstart', function (e) {

// // 打印的事件对象

// return e.preventDefault()

// })

中途出现了一次报错 解决了很久

.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();

}

报错解决问题的链接

点击了解更多