Question

我的代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
    html,body {margin: 0;padding: 0;box-sizing: border-box;}
    html{
        height: 100%;
    }
    body{
        height: 100%;
    }
    .app {
        height: 100%;
    }
    .page {
        height: 100%;
        background: linear-gradient(to bottom, #c2e59c , #64b3f4);
        position: relative;
    }
    .chat {
        height: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        overflow: scroll;
    }
    p{
        padding: 155px 5px;
        border: solid 1px red;
    }
</style>
</head>
<body>
<div class="app">
    <div class="page">
        <div class="chat">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
</body>
</html>

这是一个简单的整页聊天框。看起来不错。只有一个问题，它无法在移动设备上滚动，它会在您触摸时停止滚动，它不会像它应该的那样具有连续性。

知道为什么会这样吗？

移动测试的现场演示：http://demo.thatilike.com

注意：您无法在Chrome移动模式下看到问题，需要在真实移动设备上进行测试

Answer 1

将-webkit-overflow-scrolling: touch;添加到可滚动元素。这将增加动力滚动到触摸设备上的元素。但请确保将overflow-y: scroll留给桌面。

100％高度元素无法在移动设备上滚动

1 个答案: