ウェブキットオーバーフロースクロールを使用してモバイルデバイスに位置固定された

ヘッダーが固定され、本文コンテンツだけが弾性スクロールを持つ単純なHTMLを持っています。スクロールバーが隠れるまで待ち、もう一度スクロールしようとすると、スクロールがフリーズし、数秒間スクロールできなくなります。とにかくポジションがない場合：固定されたdivを静的にすることができます。それはモバイルiOS端末に近づいているだけです。ウェブキットオーバーフロースクロールを使用してモバイルデバイスに位置固定された

videoもご確認ください。

<html> 
 
    <head> 
 
     <title>Sohail</title> 
 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
 
     <style type="text/css"> 
 
      body { 
 
       height: 100%; 
 
       -webkit-overflow-scrolling: touch; 
 
       background-color: red; 
 
      } 
 
      div { 
 
       overflow-y: scroll; 
 
       height: 100%; 
 
       background-color: green; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div style="position:fixed;width:100%"> 
 
      <div style="height: 20%;background-color: yellow;"> 
 
       Header 
 
      </div> 
 
      <div> 
 
       Sohail Hussain<br/><br/><br/><br/><br/><br/><br/><br/> 
 
       FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
       FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
       FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
       FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
       FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
       FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
       ABCDEFGHI 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

出典

2016-05-25 sohail.hussain.dyn

あなたは 'オーバーフロー-Yを適用している：スクロール;'右することはできませんすべてのdiv要素、上？異なるdivのクラスを使用する。 – s1h4d0w

ええ、ちょうどそれを避けることができますが、実際の問題は、スクロールにこだわって取得されます。ビデオの動作を確認してください。 –

Sohail、このコードを使用します。私はそれが問題を解決すると確信しています：

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.scrollDivWrap { 
 
    z-index: 1; 
 
    width: 100%; \t 
 
} 
 
.scrollDiv { 
 
    overflow: auto; 
 
    background-color: green; 
 
    -webkit-overflow-scrolling: touch; 
 
    z-index: 1; 
 
    position: absolute; 
 
    padding: 0; 
 
    top: 50px; 
 
    width: 100%; 
 
} 
 
header { 
 
    height: 50px; 
 
    background-color: yellow; 
 
    position: fixed; 
 
    width: 100%; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    text-align: center; 
 
}

<html> 
 

 
<head> 
 
    <title>Sohail</title> 
 
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
 
</head> 
 

 
<body> 
 
    <header> 
 
     Header 
 
    </header> 
 
    <div class="scrollDivWrap"> 
 
    \t <div class="scrollDiv"> 
 
      Sohail Hussain<br/><br/><br/><br/><br/><br/><br/><br/> 
 
      FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
      FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
      FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
      FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
      FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/> 
 
      FDSFSDFDSFS<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
      ABCDEFGHI 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-06-28 08:31:50

ウェブキットオーバーフロースクロールを使用してモバイルデバイスに位置固定された

答えて

関連する問題