web-dev-qa-db-ja.com

ポップアップを表示するときに背景のスクロールを防止する

ポップアップに表示されるフォームがあります。ロード後、背景はグレー表示されますが、ユーザーは背景コンテンツを上下にスクロールできます。

背景がスクロールしないようにするにはどうすればよいですか？

ここに例

pDFスクリーンショットの右側にある「この見積もりをメールで送信」リンク。

jqueryhtmlpopup
21
Joe

1つのオプションは、overflowプロパティをhiddenのbodyに一時的に設定することです。これにより、スクロールバーが削除されますが、ページが調整されるときに小さなちらつきが発生します。

もう1つの選択肢は、$(window).scroll()イベントをタップしてそこからfalseを返すことです。また、ブラウザーはreturn falseステートメントにそれほど速く反応しないため、少しちらつきが発生します。

最善の策は、クリックイベントハンドラーを別のファイルに移動し、そこでバインドを行うことです。

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

これにより、ページがスクロールされなくなります。ダイアログを閉じた後、バインドを削除することを忘れないでください。そうしないと、ページをスクロールできなくなります。次を使用してバインドを削除できます。

$(window).unbind('scroll');
17
Tatu Ulmanen

ポップアップを開いたときに本体のスクロールバーを非表示にするには

document.body.style.overflow = "hidden";

ポップアップを閉じるときに元に戻す

document.body.style.overflow = "visible";
29
sudhAnsu63

このコードブロックは、スクロールの問題が非常に一般的なIOSモバイルデバイスで機能します。

$('body').on('touchmove', function(e) {
    if ($('.scroll-disable').has($(e.target)).length) e.preventDefault();
});
$('body').on('shown.bs.modal', function() {
    $(this).addClass('scroll-disable');
});
$('body').on('hidden.bs.modal', function() {
    $(this).removeClass('scroll-disable');
});
0
mkk

リンクで＃タグを使用しないでください！

アンカーにスクロールしようとします＃が空なので、ページの上部にスクロールします。

リンクを編集して：

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

（href = ""に注意してください）

0
Roger Far