モバイル側がjqueryを使用してスクロールリスニングscrollTopを0にする可能性のある理由

2554 ワード

htmlとbodyにフルスクリーンの高さを設定し、body上でスクロールイベントをリスニングすると、PC上でF 12でデバッグしたscrollTopの値は正常ですが、ホスト上で表示されるscrollTopの値はずっと0で、ScollPostion関数などの異なるブラウザの状況を区別しました.
スクロールリスニングがdocumentにバインドされている場合、scrollTopは、scrollTopが2つのプラットフォームで変更されていないため、PCおよびホスト上でリスニングイベントをトリガーしません.つまり、scrollTop=0です.
次のコードを示します.
html,
body {
  overflow-y: auto;
  /*    html  body     ,            scrollTop   0 */
  height: 100vh;
}
$('body').scroll(() => {
      //            
      // var scrollTop = $('body').scrollTop();
      var scrollTop = this.ScollPostion() && this.ScollPostion().top;
      const { top } = this.state;
      const dom = document.getElementsByClassName('navTitle')[0];
      if (scrollTop > top) {
        dom.style.opacity = 1;
      } else {
        dom.style.opacity = 0;
      }
      
      console.log('scrollTop, top', scrollTop, top, this.ScollPostion(), $('body').height());
    });
ScollPostion = () => {
    var t, l, w, h
    if (document.documentElement && document.documentElement.scrollTop) {
      t = document.documentElement.scrollTop
      l = document.documentElement.scrollLeft
      w = document.documentElement.scrollWidth
      h = document.documentElement.scrollHeight
    } else if (document.body) {
      t = document.body.scrollTop
      l = document.body.scrollLeft
      w = document.body.scrollWidth
      h = document.body.scrollHeight
    }
    return {
      top: t,
      left: l,
      width: w,
      height: h,
    }
  }

 
高さを設定しないと
html,
body {
  overflow-y: auto;
  /*    html  body     ,            scrollTop   0 */
  /* height: 100vh; */
}

bodyが傍受された場合、bodyのスクロール傍受イベントはトリガーされません
その後documentにバインドすることで、同時に本体とPCでスクロールリスニングをトリガーし、正しいscrollTopを得ることができます.これはおかしいです.
単一ページreactアプリケーションとして、#rootノードにリスニングイベントをバインドし、そのrootノードにheight:100 vhを設定し、スクロールイベントもトリガーされず、なぜか分かりません.でも事件はやっと解決した
$(document).scroll(() => {
      //            
      // var scrollTop = $('body').scrollTop();
      var scrollTop = this.ScollPostion() && this.ScollPostion().top;
      const { top } = this.state;
      const dom = document.getElementsByClassName('navTitle')[0];
      if (scrollTop > top) {
        dom.style.opacity = 1;
      } else {
        dom.style.opacity = 0;
      }
      console.log('scrollTop, top', scrollTop, top, this.ScollPostion(), $('body').height());
    });