モバイルデバイスでスクロールするときにビューポートの高さがちらつく

Question

私は自分のウェブサイトで多くのvhを使用しました。モバイルブラウザでは、ページを下にスクロールするとブラウザのアドレスバーが消えてしまいます。クロム）

これは私のページのすべてを発生したとき、私の問題があるが原因アドレスバーが私のドキュメントの高さになります

は、任意の回避策このため、このような最初の使用であなたの現在のデバイスのVHの計算などがあることの違いに変更されますjQueryを使用して、すべてをvhではなくpxに変換しますか？

または任意の他の提案

おかげ

Answer 1

私は数日前にこれと同じ問題で戦ったし、私が思いついた解決策は、このようなものだった

：

$(window).on('load', function() { 
    var $vhElement = $("#vhElement"); //Your element with 100vh 
    var height = $vhElement.height(); //Get rendered height in px 
    $vhElement.css("height", height + "px"); //Override vh height with px height 
}); 

お持ちの場合これを必要とする複数の要素は、すべてのクラスに適用して、次のものを使用できます。

$(window).on('load', function() { 
    var $vhElements = $(".vhElement"); //Your elements using vh 
    $vhElements.each(function() { 
     var height = $(this).height(); //Get rendered height in px 
     $(this).css("height", height + "px"); //Override vh height with px height 
    }); 
});