スクロールスルーの問題
2322 ワード
周知のように、移動端にfixedマスクやポップアップ層がある場合、スクリーンがスライドし、後ろの背景もスクロールし、強迫症の私はいつも気分が悪い.しかし、完璧な解決策も見つからなかった.
ここでは2つの使える方法について話します.
1.マスクまたは弾層が転がっていない場合:
vueでは@touchmove.prevent
vueを使用しない場合はtouchmoveイベントを傍受し、イベントのデフォルト動作を阻止します(e.preventDefault()
2、マスクや弾層に転がるような内容がある場合は、上記の方法ではいけません.
この場合の解決策は、ポップアップマスクをクリックすると、現在のドキュメントのスクロールバーの位置を取得し、bodyがスクロールできないように設定することです.ポップアップレイヤを閉じると、リカバリページがスクロールされ、マスクがイジェクトされたときの位置にスクロールされます.たとえば.
ここでは2つの使える方法について話します.
1.マスクまたは弾層が転がっていない場合:
vueでは@touchmove.prevent
vueを使用しない場合はtouchmoveイベントを傍受し、イベントのデフォルト動作を阻止します(e.preventDefault()
2、マスクや弾層に転がるような内容がある場合は、上記の方法ではいけません.
この場合の解決策は、ポップアップマスクをクリックすると、現在のドキュメントのスクロールバーの位置を取得し、bodyがスクロールできないように設定することです.ポップアップレイヤを閉じると、リカバリページがスクロールされ、マスクがイジェクトされたときの位置にスクロールされます.たとえば.
let h = ''
//
$(".xieyi span").click(function () {
h=$(document).scrollTop();
$(".graybg-yuzhuce,.xieyitip").show();
bodyNotScroll();
})
// body
function bodyNotScroll() {
h = $(document).scrollTop();
$("body,html").css('overflow-y', "hidden");
$("body,html").css('height', "100%");
$("body").scrollTop(h);
}
//
$(".xieyitip span").click(function(){
$(".graybg-yuzhuce,.xieyitip").hide();
reset()
})
function reset() {
$("body,html").css('overflow-y', "auto");
$("body,html").css('height', "auto");
$("body").scrollTop(h)
}