IOS微信下问题2 页面滚动失效

建议先看这篇文章

下面说一下点击其他区域，再在滚动区域滑动，滚动条无法滚动这个bug

问题复现：

由非滚动区域向滚动区域滑动，再迅速滑动滚动区域，此时滚动会出现bug

在一个可上下滑动的区域，滚动条在最上面再向上滑动或滚动条在最下面再向下滑，松手后立即滑动滚动区域，滚动出现bug

正常复现问题1 复现问题2

成因：

滚到尽头继续滚动,分为两种情况,两个对象.

1. 由其他位置滚到尽头,乘势继续滚动,全局滚动与局部滚动均有一个橡皮筋弹动效果.
2. 完全静止在尽头后,继续向尽头滚动,全局滚动有橡皮筋弹动.
局部滚动则是禁止继续滚动.

而问题在于,局部滚动虽然禁止了滚动,但依然计算橡皮筋弹动效果的时间.而在此期间,由于禁止滚动,那么在一个动效时间内,是完全无法滚动的.

下面是解决后的代码，想重现问题可以去掉监听事件（react编写，原生或者vue版可以私...）

import React from 'react' 

export default class extends React.Component {
    componentDidMount() {
        //去除ios滚动回弹
        let startY = 0;
        const touchStart = (e) => {
            try {
                let touch = e.touches[0],
                    y     = Number(touch.pageY);
                startY = y;
            } catch (e) {
                alert(e);
            }
        };
        let ele = document.querySelector('.content');
        const touchMove = (e) => {
            let point = e.touches[0];
            if (ele.contains(e.target)) {
                if (ele.scrollTop === 0 && point.clientY > startY) {
                    e.preventDefault();
                } else if (ele.scrollTop === ele.scrollHeight - ele.offsetHeight && point.clientY < startY) {
                    e.preventDefault()
                }
            } else {
                e.preventDefault();
            }
        };
        document.addEventListener('touchstart', touchStart);
        document.addEventListener('touchmove', touchMove, { passive: false });
    }

    render(){
        const contentStyle = {
            width: '100vw',
            height: '85vh',
            position: 'absolute',
            top: 0,
            bottom: '15vh',
            overflowY: 'scroll',
            background: 'burlywood',
        };
        const footerStyle = {
            width: '100%',
            height: '15vh',
            position: 'absolute',
            bottom: 0,
            background: 'gray',
            zIndex: 2
        };
        return (
            <div className="scroll-test" style={{height: '100vh'}}>
                <div style={{overflow: "hidden"}}>
                    <div className="content" style={contentStyle}>
                        {[1,3,3,4,5,67,9,8].map((value, index, array) => <div style={{height: '20vh'}}>{value}</div>)}
                    </div>
                </div>
                <div className="footer" style={footerStyle}>super</div>
            </div>
        )
    }
}

来源：CSDN

作者：dk123sw

链接：https://blog.csdn.net/dk123sw/article/details/103887221

标签

微信页面