モバイル側がjqueryを使用してスクロールリスニングscrollTopを0にする可能性のある理由
2554 ワード
htmlとbodyにフルスクリーンの高さを設定し、body上でスクロールイベントをリスニングすると、PC上でF 12でデバッグしたscrollTopの値は正常ですが、ホスト上で表示されるscrollTopの値はずっと0で、ScollPostion関数などの異なるブラウザの状況を区別しました.
スクロールリスニングがdocumentにバインドされている場合、scrollTopは、scrollTopが2つのプラットフォームで変更されていないため、PCおよびホスト上でリスニングイベントをトリガーしません.つまり、scrollTop=0です.
次のコードを示します.
高さを設定しないと
bodyが傍受された場合、bodyのスクロール傍受イベントはトリガーされません
その後documentにバインドすることで、同時に本体とPCでスクロールリスニングをトリガーし、正しいscrollTopを得ることができます.これはおかしいです.
単一ページreactアプリケーションとして、#rootノードにリスニングイベントをバインドし、そのrootノードにheight:100 vhを設定し、スクロールイベントもトリガーされず、なぜか分かりません.でも事件はやっと解決した
スクロールリスニングが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());
});