移动端 H5 禁止滚动链接(scroll chaining)(完美解决方案)

2,147 阅读2分钟

平时大家开发手机端页面的时候,经常会遇到弹窗的情况,比如

正常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);
};

为蒙层中的滚动元素绑定这个方法,就可以达到想要的效果,好了,今天分享就到这里,谢谢大家