HTML高度爲100％時在手機上使用Skrollr

我正在嘗試在我的網站中使用Skrollr。一切工作正常，除了在移動。在手機上，您無法向下滾動頁面。HTML高度爲100％時在手機上使用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; 
     } 
}

來源

2015-08-25 Jake M

所有我的理解，你需要儘可能是設置一個媒體查詢更改HTML，身體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

來源

2015-08-25 02:30:29 T04435

HTML高度爲100％時在手機上使用Skrollr

回答

相關問題