モバイルスクロールの固定要素の下部に透明な開口部があります。

Question

これは説明が難しいですが、現在はページ下部に固定された項目があります。ユーザーがサイトの一番下までスクロールすると消えます。大量のテキストを含む別のdiv。ユーザーがサイトの上部にスクロールし始めると、固定要素が画面の下部に再び表示されます。固定要素の位置は「bottom：0」に設定されます。

残念ながら、ユーザーがスクロールすると、固定項目の下に高さ約20ピクセルの透明なボックスが表示されることがあります。固定要素の下に表示される要素はページ上に表示されますが、固定要素は上部にとどまります。

この空白スペースをクリックすると、Googleの検索バーが表示されます。 Googleの検索バーは固定された要素の下の透明なボックスを引き起こしているものですか？それ以外に何ができますか？デベロッパーツールエミュレーターでは、実際の携帯電話でのみ発生します。ここで

私のJSされています：

$(".mobile-isi-expand").click(function(){ 
    var topMenuHeight = $('.mobile-top-menu').height(); 
    var documentHeight = $('#pageContent').height(); 
    var screenHeightSans = $(window).height(); 

    console.log(topMenuHeight); 
    console.log(documentHeight); 
    var desiredExpandedHeight = topMenuHeight; 
    var desiredContractedHeight = "150px"; 
    var deviceHeight = $(window).height(); 
    var regionContent = $(".region-content").height(); 
    if(documentHeight === null){ 
     documentHeight = screenHeightSans; 
    } 
    else { 

    } 
     if($(this).hasClass("mobile-expanded")) { 
      $(this).removeClass("mobile-expanded"); 
      $(".mobile-isi-container").animate({ 
       "height":"150px", 
       "bottom":"0", 
       "top":deviceHeight - 150 
      }); 
     } 
     else { 
      $(this).removeClass("mobile-isi-minimize"); 
      $(".mobile-isi-expand").addClass("mobile-expanded"); 
      $(".mobile-isi-container").animate({ 
       "top":desiredExpandedHeight, 
       "height": documentHeight 
      }); 
     } 
}); 


$(function($) { 
    if(Modernizr.mq('(max-width: 480px)')) { 
     $(window).on('scroll', function() { 
      var is_root = location.pathname == "/"; 
      var referenceHeight = $('.referenceArea').height(); 
      var pageContentHeight = $("#pageContent").height(); 
      var regionContent = $(".region-content").height(); 
      var refAndPageHeight = referenceHeight + pageContentHeight; 


      if($(this).scrollTop() >= regionContent - 220) { 
       $('.mobile-hidden-isi').addClass("mobile-active"); 
       $('.mobile-isi-container').css({"display":"none", "height": "150px"}); 
      } 
      else { 
       $('.mobile-hidden-isi').removeClass("mobile-active"); 
       $('.mobile-isi-container').css({"display":"block", "height": "150px", "bottom" : "0"}); 
       var mobileISIheight = $('.mobile-isi-container').height(); 
       console.log(mobileISIheight); 
      } 
     }) 
     } 
     else { 

     } 
}); 

はCSS：

.mobile-isi-container { 
    position: fixed; 
    bottom: 0; 
    font-family: 'quicksandregular'; 
    left: 0; 
    display: block; 
    background-color: #fff; 
    width: 100%; 
    height: 150px; 
    min-height: 150px; 
    z-index: 999999; 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    overflow-y: scroll; 
    -webkit-box-shadow: 1px -1px 3px -1px rgba(64,62,64,1); 
    -moz-box-shadow: 1px -1px 3px -1px rgba(64,62,64,1); 
    box-shadow: 1px -1px 3px -1px rgba(64,62,64,1); 
} 

Answer 1

これが原因アドレスバーが表示されると消えに発生した。ここ

は、下の画像です。計算されたwindow.height（）が変更されます。私がしたのはオーバーフロー-y：オーバーフロー-yの可視的なinsteaを追加することでした：私のCSSにスクロールし、背景色を追加しました。固定領域の高さを可変にしていますが、これは透過領域をカバーします。