平时大家开发手机端页面的时候,经常会遇到弹窗的情况,比如
正常fixed定位的蒙层,是无法阻止蒙层后面元素滚动的,而解决办法有很多,常用的overflow-hidden 等方法在此就不多做赘述了,在此安利给大家一个比较好用的css解决方案css方式
在蒙层所在元素添加css样式
{
touch-action:none
}
通过禁用触碰事件来彻底解决这个元素的所有手势,自然底层的也不会滚动了
ok现在这种单一的弹窗问题解决了,有的童鞋可能会问了,弹窗中的元素需要滚动的话用这个方法好使吗,确实是不好用了,因为如果禁用掉滚动元素的touch-action他也滚不起来了(废话可以略过)之接上干货吧
举个例子先
类似这样的级联列表弹窗的滚动方案 css解决方案:overscroll-behavior:contain
这个属性可以解决当前元素滚动到头,后面元素开始滚动的问题,但是有兼容性问题,在safair上根本使用不了,但是其他浏览器的支持性还是不错的。
js解决方案:
function startAutoScroll(id) {
//初始化滚动距离;
var startY;
//滚动开始的时候记录滚动初始值
document.getElementById(id).addEventListener('touchstart', e => {
startY = e.targetTouches[0].pageY
}, false);
//滚动过程中监听是否到底底部或者顶部
document.getElementById(id).addEventListener('touchmove', e => {
//当前滚动距离的滚动值
var py = e.targetTouches[0].pageY;
//当前滚动元素卷去的高度
var scrollTop= document.getElementById(id).scrollTop;
//当前滚动元素的实际高度
var scrollHeight= document.getElementById(id).scrollHeight;
//当前滚动元素的可视高度
var clientHeight= document.getElementById(id).clientHeight +1;
//如果到底部 阻止执行与事件关联的默认动作
if((scrollTop+clientHeight >= scrollHeight)&& startY > py){
e.preventDefault();
}
//如果到顶部 阻止执行与事件关联的默认动作
if((scrollTop===0)&& startY < py){
e.preventDefault();
}
}, false);
};
为蒙层中的滚动元素绑定这个方法,就可以达到想要的效果,好了,今天分享就到这里,谢谢大家