记录一下做项目的时候遇到的奇怪的bug,
弹出层有滚动条的话滚到最顶部或者最底部如果继续滚动,会导致弹窗中的滚动不生效,所以这里只需要不让滚动条的scrollTop达到0或者最大值就好了
/**
* 传递过来的参数是id还是class通过第一个是.还是#判断
* @param modal 整个模态框的id或class
* @param model 最里层内容的id或class
*/
export const iosScrollPierceThough = (modal, model) => {
// 当前移动端是不是ios
if((navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i))) {
let node1 = document.getElementById('');
let node2 = document.getElementById('');
if (modal[0] === '#') {
node1 = document.querySelector(model);
node2 = document.querySelector(modal);
} else {
node1 = document.querySelectorAll(model)[0];
node2 = document.querySelectorAll(modal)[0];
}
let maxScrollBottom = node1.scrollHeight - node1.clientHeight; // 算出scrollTop最大可以是多少
node1.addEventListener('touchmove', function(e) { // 阻止冒泡
e.stopPropagation();
});
// 当手指放到屏幕上但还没开始滑动的时候
node1.addEventListener('touchstart', function(e) {
if (node1.scrollTop >= maxScrollBottom) {
node1.scrollTop = maxScrollBottom - 1;
}
if (node1.scrollTop === 0) {
node1.scrollTop = 1;
}
});
node2.addEventListener('touchmove', function(e) {
if (node1.scrollTop === 0 || node1.scrollTop === maxScrollBottom) {
e.stopPropagation();
}
if (node1.scrollTop >= maxScrollBottom) {
node1.scrollTop = maxScrollBottom - 1;
}
if (node1.scrollTop === 0) {
node1.scrollTop = 1;
}
})
node2.addEventListener('touchmove', function (e) {
var target = e.target;
if (target != node1) {
e.preventDefault();
} else {
e.stopPropagation();
}
if (node1.scrollTop === 0 || node1.scrollTop === maxScrollBottom) {
e.stopPropagation();
}
if (node1.scrollTop >= maxScrollBottom) {
node1.scrollTop = maxScrollBottom - 1;
}
if (node1.scrollTop === 0) {
node1.scrollTop = 1;
}
}, false);
}
}
这个实我的解决办法,里面有一些费代码,后面有时间再修改,这里仅仅记录一下,以免自己忘了。
网友评论