Question

我试图在我的网站上使用Skrollr。除了在移动设备上，一切正常。在移动设备上，您无法向下滚动页面。

我确定这是因为我已将html和body标记都设置为height: 100%。如果我删除此CSS，那么移动版本可以正常工作。虽然这个CSS对主网站至关重要，所以我需要它在那里。是否可以保留此CSS并使移动版滚动正常工作？

注意：我知道我可以修复sections，但这在我的网站上不起作用，因为网站上还有静态部分。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <style>
    html, body { 
        margin: 0; 
        padding: 0; 
        height: 100%; 
        width: 100%; 
    }

    section {
        padding: 5%;
        height:100%;
        background-color: red;

        width: 100%;
        min-height: 100%;
        overflow: hidden;

        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        align-items: center;

        vertical-align: middle;

        position: relative;
    }

    </style>
</head>
<body id="skrollr-body">

    <section data-0="background-color: rgb(0,0,0);" data-500="background-color: rgb(0,0,255);">
        <div class="container vcenter">

            <h1> Some VCENTRED long long long long long long long long long text </h1>

        </div>
    </section>

    <section>
        <div class="container vcenter">

            <h1> Some VCENTRED long long long long long long long long long text </h1>

        </div>
    </section>

    <script src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/skrollr.min.js"></script>
    <!--[if IE]>
            <script src="js/skrollr.ie.min.js"></script>
        <![endif]-->
    <script type="text/javascript">
        skrollr.init({ forceHeight: false, smoothScrolling: false, mobileDeceleration: 0.004 });
    </script>

</body>
</html>

解决方案：T04435的回答有效。下面是如何修复的：
编辑：太快说，它适用于Android但不适用于iOS（专门针对iPhone）。

@media screen and (max-width:767px){
        html, body { 
            height: inherit;
        }

        section {
            height:100vh;
            min-height: 100vh;
        }
}

当HTML高度为100％时，在Mobile上使用Skrollr

0 个答案: