CODEWITHSUNDEEP
css
angry kiwi
angry kiwi

Reputation: 11435

100% height element can not scroll on mobile

My code

<!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>

This is a simple full page chat box. It looks good. Just one problem, it can not scroll well on mobile, it stops scrolling when you untouch, it doesn't have continuity like it should.

Any idea why is that?

live demo for mobile test: http://demo.thatilike.com

note: you won't see the problem on chrome mobile mode, it needs to be tested on real mobile

Upvotes: 0

Views: 63

Answers (1)

startamovement
startamovement

Reputation: 26

Add -webkit-overflow-scrolling: touch; to the scrollable element. This will add momentum scrolling to the element on touch devices. But be sure to leave overflow-y: scroll for desktop.

Upvotes: 1

Related Questions