24

私のウェブサイトでモーダルポップアップを開くことを処理するJavaScriptがいくつかあり、要素のoverflow-yプロパティをに設定します。Chrome と IE では、これは期待どおりに機能します。スクロールバーが非表示になり、モーダル ポップアップの背後にあるページは同じスクロール位置に残ります。ポップアップが閉じられると、に設定され、ページは以前と同じ状態と位置になります。<html>hiddenoverflow-yscroll

ただし、Firefox では、ページのスクロール位置overflow-yが変更されるとすぐhiddenに一番上にジャンプするため、ポップアップが閉じられると、ユーザーのビューが変更されます。これは理想的ではありません。

問題はこのjsfiddleで見ることができます

この動作の解決策はありますか?

4

8 に答える 8

15

overflow: hiddenonhtmlのみで使用しないでくださいbody。私は同じ問題を抱えていましたが、削除することで修正しましたhtml。

その代わり ：

$('body, html').css('overflow', 'hidden');

行う ：

$('body').css('overflow', 'hidden');

于 2016-08-27T17:20:20.427 に答える
0

この問題が発生しました。私の修正は

/**
 * Store the scroll top position as applying overflow:hidden to the body makes it jump to 0
 * @type int
 */
var scrollTop;

$(selecor).unbind('click.openmenu').on('click.openmenu', function (e) {
    // Stuff...
    scrollTop = $('body').scrollTop() || $('html').scrollTop();
    $('body,html').css({overflow: 'hidden'});
});

$(selector).unbind('click.closemenu').on('click.closemenu', function (e) {
    // Stuff
    $('body,html').css({overflow: 'initial'}).scrollTop(scrollTop);
});

ただし、これは、ユーザーがビューポートのサイズを変更した場合に何が起こるかという問題を解決しません。

于 2016-08-18T16:19:31.170 に答える
0

編集:あなたのコードを見たところ、href="#" のリンクを使用しました。それが原因である可能性が高いです。href プロパティを削除するか、ボタンを使用することをお勧めします。

これは css 自体が原因ではない可能性があることを考慮する必要があります。私の場合、リンクを使用してポップアップを開きました。<a href="#">open popup</a> つまり、実際にトップにジャンプした原因は、リンクの href プロパティの「#」でした。

私はそれを削除し、noscroll クラスを html と body タグに追加しました:

.noscroll {
    overflow: hidden;
}
于 2021-06-06T23:32:49.693 に答える
-1

最初から身長を100％に保つことで問題は解決しました。

body{
   height:100vh;
   overflow:auto;
}
body.with-modal{
   overflow:hidden;
}
于 2018-02-05T01:52:21.127 に答える
-2

htmlの代わりにbodyタグを使用してください。

JSフィドル：-http：//jsfiddle.net/SBLgJ/6/

JSの変更：-

$(document).ready(function() {
    $('#middle a').on('click', function(e) {
        e.preventDefault();
        $('body').css('overflow-y', 'hidden');  
    });
});

CSSの変更：-

body {
    overflow-y:scroll;
}

このような動作について報告された問題があります。（https://github.com/necolas/normalize.css/issues/71）

于 2013-02-22T08:28:15.867 に答える