HTML 高度为 100% 时在移动设备上使用 Skrollr

Question

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

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

JSFiddle

注意：我知道我可以修复 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;
        }
}

Answer 1

据我所知，你只需要设置一个媒体查询来更改手机html,body heigth:100%

@media screen and (max-width:767px){
    html,body{
       // you might need to play with the value to see
       // which one fits toe your desired outcome
       heigth:initial;
    }
}

请检查此 @MEDIA ，以便您可以获得正确的值，上面的示例是您需要执行的操作的示例

HOPE 这有帮助 T04435

HTML 高度为 100% 时在移动设备上使用 Skrollr

Use Skrollr on Mobile when HTML height is 100%

css

skrollr