All geek questions in one place

Unable to create scrollable area inside scrollable area on ios

The following code works fine on desktop and Android mobile devices, however it does not work on ios. I would appreciate any help to help me in the right direction.

https://jsfiddle.net/slash197/047c4dj8/6/

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.holder {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.content {
    width: 100%;
    height: 128px;
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}
.row {
    width: 3000px;
    height: 100%;
    background-image: -webkit-linear-gradient(
        left,
        rgba(0, 0, 255, 0.0)   0%,
        rgba(0, 0, 255, 1.0) 100%
    );
}


<div class="holder">
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
    <div class="content">
        <div class="row"></div>
    </div>
</div>
+4
source share
2 answers

IOS Safari ignores the percentage width, changing it to px, and it will start working by checking the fiddel link below.

    <!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .holder {
                position: relative;
                width: 1000px;
                height: 100%;
                overflow-y: scroll;
                overflow-x: hidden;
       -webkit-overflow-scrolling-x: touch !important;
            }
            .content {
                width: 1000px;
                height: 128px;
        display:block;
        float:left;
                overflow-y: hidden;
                overflow-x: scroll;
        -webkit-overflow-scrolling-x: touch !important;
            }
            .row {
                width: 3000px;
                height: 100px;
        display:block;
        float:left;
                background-image: -webkit-linear-gradient(
                    left,
                    rgba(0, 0, 255, 0.0)   0%,
                    rgba(0, 0, 255, 1.0) 100%
                );
            }
        </style>
    </head>
    <body>
        <div class="holder">
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
            <div class="content">
                <div class="row"></div>
            </div>
        </div>
    </body>
</html>

https://jsfiddle.net/pe6t29kf/11/

+3
source

, .row width, , <div> . , , ? iPhone, , - , iOS. , , ?

, , , , width min-width, , > 100%?

<div class="holder">
    <div class="content">
        <div class="row" style="min-width: 101%"></div>
    </div>
</div>

iOS, , , iOS, .

iOS 9` -webkit-overflow-scrolling: touch` `: `

0

Source: https://habr.com/ru/post/1692957/

More articles:


All Articles