一、问题

一个 div 使用了 overflow:scroll; ,在移动端可以滚动,但是无法平滑滚动(就像浏览网页那样)。

二、解决

开启滚动硬件加速

-webkit-overflow-scrolling: touch;

完整的示例代码:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
    <style>
        #wrap{
            height: 300px;
            width:300px;
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
                <li>平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动平滑滚动</li>
            </ul>
    </div>
</body>
</html>