IOS微信下問題2 頁面滾動失效

建議先看這篇文章   (-webkit-overflow-scrolling:touch)

下面 說一下點擊其他區域，再在滾動區域滑動，滾動條無法滾動 這個bug

問題復現：

由非滾動區域向滾動區域滑動，再迅速滑動滾動區域，此時滾動會出現bug

在一個可上下滑動的區域，滾動條在最上面再向上滑動或滾動條在最下面再向下滑，鬆手後立即滑動滾動區域，滾動出現bug

                                          

                 正常                                                        復現問題1                                                   復現問題2

 

成因：

滾到盡頭繼續滾動,分爲兩種情況,兩個對象.

1. 由其他位置滾到盡頭,乘勢繼續滾動,全局滾動與局部滾動均有一個橡皮筋彈動效果.
2. 完全靜止在盡頭後,繼續向盡頭滾動,全局滾動有橡皮筋彈動.
局部滾動則是禁止繼續滾動.

而問題在於,局部滾動雖然禁止了滾動,但依然計算橡皮筋彈動效果的時間.而在此期間,由於禁止滾動,那麼在一個動效時間內,是完全無法滾動的.

 

下面是解決後的代碼，想重現問題可以去掉監聽事件 （react編寫，原生或者vue版可以私...）

測試使用ios版本爲13如有小夥伴在低版本看不到橡皮筋效果請在類“content”上加-webkit-overflow-scrolling:touch屬性.

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>
        )
    }
}