iosシステムの微信ブラウザ、safariブラウザのh 5ページの上で下落して懸濁層がウィンドウから離れる解決方法...

一.実行環境:
iPhoneのすべての機種のqqブラウザ、safariブラウザ、微信内蔵ブラウザ(qqブラウザコア)など.
二.異常現象:
1.h 5ページを大幅に上下にスライドし、スライドを停止し、ローカルスクロールバーなどのページスクロールに影響を与える場合がある.
2.h 5ページを大幅に上下にスライドし、ページ内の懸濁層、例えば頭部、下部メニューなど、指定された位置に固定する必要がある層は、稼いだインタフェースに従ってスライドしない.先端の位置付けが不慣れであれば、浮遊層のフレームが内容から分離されることもある.
三.解決方法:
1.シールドスライドジェスチャー——具体的な解決方法は探求研究が必要で、慎重に使用する
ブラウザのスライドジェスチャーを直接遮断します.直接的で、時間と労力を節約し、iosの一部のブラウザのデフォルトのスライドジェスチャーがもたらす異常を排除します.
サンプルコード:

window.addEventListener('touchstart',function(e){e.preventDefault();});
window.addEventListener(‘touchmove’,function(e){e.preventDefault();});

個人的には特別な要求がなければ、この方法をそのまま使えばいいと思います.2行のコードで後患を免除できます.
注意:この方法は直接ページのスクロール方式を遮断して、具体的な解決方法は探求して研究しなければならなくて、慎重に使います.
2.懸濁層の位置決め方式を動的に修正する
サスペンションの配置方法を動的に変更します.ブラウザでデフォルトのスライドアップジェスチャーを保持し、サスペンションがページ全体から離れる問題も解決します.
サンプルコード:

  //angular   ，    
  angular.element(document).on('scroll', function () {
    var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    var window_height = $(window).height() + $(window).scrollTop();
    if (scrollHeight <= window_height) {
      //      ，          
      $(ele).css({'position': 'absolute'})
    } else {
      //    ，          ，              
      $(ele).css({'position': 'static'})
    }
  })

 
ブラウザのデフォルトのスライドジェスチャーを必ず保持するには、このような方法しかありません.ページをスライドするとき、動的に懸濁層の位置決め方式を相対位置決めに変更し、スライドするときにブラウザ自身のスライドジェスチャーをトリガすると、懸濁層はH 5インタフェース全体に対して位置決めされ、分離現象は発生しません.
ios上でインタフェース全体をスライドさせることに慣れているユーザーにとって、この方法は確かに良いですが、インタフェース全体に従ってスライドする必要がある懸濁層がどれだけあるかを個別に処理する必要があります.これは面倒です.
3.cssスタイルを合理的に使用する:
fixed測位を使用するすべての要素をabsolute測位に変更すると,問題を解決することができ,この方法が有効であることが実証された.
 position:absolute; 
tips:スクロールバーがある場合、fixed位置決めはスクロールバーに従って移動しませんが、absoluteはスクロールバーに従って移動するので、スクロールが必要な層の外周に懸濁層があることを保証します.相対的に、個人的な感覚はやはりこの方法が頼りだと思います.
 
転載先:https://www.cnblogs.com/xyyt/p/7242689.html