Webサイトのモーダル（http://twitter.github.com/bootstrapから）を開いているときにマウスホイールを使用しているときに、体のスクロールを停止したいのですが。
モーダルが開かれたときに以下のJavaScriptを呼び出そうとしましたが、成功しませんでした
$(window).scroll(function() { return false; });そして
$(window).live('scroll', function() { return false; });私たちのウェブサイトはIE6のサポートを落としましたが、IE7 +は互換性がある必要があります。
回答:
ブートストラップは、モーダルダイアログが表示されるとmodalクラスmodal-openをボディに自動的に追加し、ダイアログが非表示になるとクラスを削除します。したがって、CSSに以下を追加できます。
body.modal-open {
overflow: hidden;
}
上記のコードはBootstrap CSSコードベースに属していると主張することもできますが、これはサイトに追加する簡単な修正です。
2013年2月8日更新
これはTwitter Bootstrap v。2.3.0での動作を停止しました。modal-openクラスを本文に追加しなくなりました。
回避策は、モーダルが表示されようとしているときにボディにクラスを追加し、モーダルが閉じているときにクラスを削除することです。
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
2013年3月11日更新modal-openスクロールを防止する目的で
、クラスがBootstrap 3.0で明示的に戻るように見えます。
本体に.modal-openを再導入します（スクロールをそこに挿入できるようにするため）
これを見てください：https : //github.com/twitter/bootstrap/pull/6342- モーダルセクションを見てください。
modal-openBootstrap 3に戻りますので、起動したら上記のコードを削除しても安全です。
承認された回答はモバイル（少なくともiOS 7 w / Safari 7）では機能せず、CSSが機能するときに私のサイトでMOAR JavaScriptを実行したくありません。
このCSSは、モーダルの下で背景ページがスクロールしないようにします。
body.modal-open {
overflow: hidden;
position: fixed;
}
ただし、基本的に上部にスクロールするというわずかな副作用もあります。position:absoluteこれを解決しますが、モバイルでスクロールする機能を再導入します。
ビューポート（ビューポートをに追加するための私のプラグイン）<body>がわかっている場合は、のcssトグルを追加するだけpositionです。
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
また、これを追加して、モーダルを表示/非表示にするときに基本ページが左/右にジャンプしないようにします。
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
position: fixed、身体なしでは機能しません。
ボディオーバーフローを非表示にすると、ボディがスクロールしなくなります。モーダルを非表示にしたら、自動に戻します。
これがコードです：
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})
あなたはオーバーフローでボディサイズをウィンドウサイズに設定してみることができます：モーダルが開いているときは非表示
@charlietflの回答を超えてスクロールバーを考慮する必要があります。そうしないと、ドキュメントがリフローする可能性があります。
body幅を記録するbodyへのオーバーフローhiddenボディの幅をステップ1の幅に明示的に設定します。
var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);bodyへのオーバーフローautoセットbodyの幅auto
var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");着想：http : //jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
$body.css("overflow", "auto");は最後のステップである必要があります:)
警告：以下のオプションはBootstrap v3.0.xには関係ありません。これらのバージョンでのスクロールはモーダル自体に明示的に限定されているためです。ホイールイベントを無効にすると、ビューポートの高さよりも高い高さのモーダルで一部のユーザーがコンテンツを表示するのを誤って防止する可能性があります。
スクロールイベントはキャンセルできません。ただし、マウスホイールとホイールのイベントをキャンセルすることは可能です。重要な注意点は、すべてのレガシーブラウザがそれらをサポートしているわけではないことです。Mozillaは最近、Gecko 17.0で後者のサポートを追加しました。完全な広がりはわかりませんが、IE6 +とChromeではサポートされています。
それらを活用する方法は次のとおりです。
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});overflow:hidden。今のところ、これが適しています。
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});CSSを変更しただけではChromeで動作しませんでした。ページを上にスクロールして戻したくなかったためです。これはうまくいきました：
$("#myModal").on("show.bs.modal", function () {
var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});これを試してください：
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}それは私のために働いた。（IE8をサポート）
position: fixedいるときにモーダルを開いたときにトップにジャンプすることにもなります。
クラス「is-modal-open」を追加するか、JavaScriptでbodyタグのスタイルを変更しても問題ありません。しかし、私たちが直面する問題は、ボディがオーバーフローになったときです：非表示、上にジャンプします（scrollTopは0になります）。これは後でユーザビリティの問題になります。
この問題の解決策として、bodyタグのオーバーフローを変更する代わりに、htmlタグで変更します。
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});このコードについてはわかりませんが、試してみる価値はあります。
jQueryの場合：
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});前に言ったように、100％確実ではありませんが、とにかくやってみてください。
2017年11月の時点でChromeは新しいcssプロパティを導入しました
overscroll-behavior: contain;
これにより、この問題が解決されます。ただし、執筆時点では、クロスブラウザーのサポートは制限されています。
詳細とブラウザのサポートについては、以下のリンクを参照してください
最良のソリューションは、body{overflow:hidden}これらの回答のほとんどで使用されているcssのみのソリューションです。一部の回答は、スクロールバーの非表示によって引き起こされる「ジャンプ」も防ぐ修正を提供しています。しかし、どれもエレガントすぎませんでした。したがって、私はこれら2つの関数を作成しましたが、それらはかなりうまく機能しているようです。
var $body = $(window.document.body);
function bodyFreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('overflow', 'hidden');
$body.css('marginRight', ($body.css('marginRight') ? '+=' : '') + ($body.innerWidth() - bodyWidth))
}
function bodyUnfreezeScroll() {
var bodyWidth = $body.innerWidth();
$body.css('marginRight', '-=' + (bodyWidth - $body.innerWidth()))
$body.css('overflow', 'auto');
}このjsFiddleをチェックして、使用されていることを確認してください。
open modalボタンの幅と等しくなります。Chrome on 8
多くの人が本文に「オーバーフロー：非表示」を提案していますが、これはWebサイトを一番上にスクロールさせるため、機能しません（少なくとも私の場合は機能しません）。
これは、jQueryを使用して私（携帯電話とコンピューターの両方）で機能するソリューションです。
$('.yourModalDiv').bind('mouseenter touchstart', function(e) {
var current = $(window).scrollTop();
$(window).scroll(function(event) {
$(window).scrollTop(current);
});
});
$('.yourModalDiv').bind('mouseleave touchend', function(e) {
$(window).off('scroll');
});これにより、モーダルのスクロールが機能し、同時にWebサイトがスクロールされなくなります。
あなたは次のロジックを使うことができました、私はそれをテストし、それは動作します（IEでも）
<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$(function(){
$('#locker').click(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
})
$('#unlocker').click(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll');
})
})
</script>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<button id="locker">lock</button>
<button id="unlocker">unlock</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>私は100％じゃないことを確認これはブートストラップで動作しますが、試してみる価値-それはgithubの上で見つけることができRemodal.jsと協力：http://vodkabears.github.io/remodal/、それは方法のために理にかなっていますかなり似ています。
ページが最上部にジャンプするのを停止し、コンテンツの右シフトも防止するbodyには、モーダルが発生したときににクラスを追加し、次のCSSルールを設定します。
body.with-modal {
position: static;
height: auto;
overflow-y: hidden;
}コンテンツの右側へのジャンプを停止するのは、position:staticとheight:autoです。overflow-y:hidden;モーダル背後スクロール可能であることからページを停止します。
このフィドルに基づく：http : //jsfiddle.net/dh834zgw/1/
次のスニペット（jqueryを使用）は、ウィンドウのスクロールを無効にします。
var curScrollTop = $(window).scrollTop();
$('html').toggleClass('noscroll').css('top', '-' + curScrollTop + 'px');そしてあなたのCSSで：
html.noscroll{
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: scroll !important;
z-index: 10;
}モーダルを削除するときは、htmlタグのnoscrollクラスを削除することを忘れないでください。
$('html').toggleClass('noscroll');overflowに設定すべきではありませんhiddenか？これは私のために働いたので+1（を使用してhidden）。
チェックボックスハックによって生成されたサイドバーがありました。ただし、主なアイデアは、ドキュメントscrollTopを保存し、ウィンドウのスクロール中に変更しないことです。
本文が「オーバーフロー：非表示」になったときにページがジャンプするのが気に入らなかっただけです。
window.addEventListener('load', function() {
let prevScrollTop = 0;
let isSidebarVisible = false;
document.getElementById('f-overlay-chkbx').addEventListener('change', (event) => {
prevScrollTop = window.pageYOffset || document.documentElement.scrollTop;
isSidebarVisible = event.target.checked;
window.addEventListener('scroll', (event) => {
if (isSidebarVisible) {
window.scrollTo(0, prevScrollTop);
}
});
})
});悲しいことに、上記の答えのどれも私の問題を修正しませんでした。
私の状況では、Webページには元々スクロールバーがあります。モーダルをクリックしても、スクロールバーが消えず、ヘッダーが少し右に移動します。
次に、追加を試みました.modal-open{overflow:auto;}（ほとんどの人が推奨しています）。それは確かに問題を修正しました：モーダルを開いた後にスクロールバーが表示されます。ただし、「ヘッダーの下の背景がモーダルの背後にある別の長いバーと一緒に少し左に移動する」という別の副作用が出ます。
幸い、を追加すると{padding-right: 0 !important;}、すべてが完全に修正されます。ヘッダーと本文の両方の背景は移動せず、モーダルは引き続きスクロールバーを保持します。
これがまだこの問題で立ち往生している人々を助けることを願っています。幸運を！
ほとんどの部分はここにありますが、すべてをまとめた答えはありません。
問題は3つあります。
（1）下にあるページのスクロールを防ぐ
$('body').css('overflow', 'hidden')（2）スクロールバーを削除する
var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)（3）モーダルが閉じられたときにクリーンアップする
$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')モーダルがフルスクリーンでない場合は、.modalバインディングをフルスクリーンオーバーレイに適用します。
モーダルの高さ/幅が100％の場合、「mouseenter / leave」はスクロールを簡単に有効または無効にするように機能します。これは本当に私にとってうまくいきました：
var currentScroll=0;
function lockscroll(){
$(window).scrollTop(currentScroll);
}
$("#myModal").mouseenter(function(){
currentScroll=$(window).scrollTop();
$(window).bind('scroll',lockscroll);
}).mouseleave(function(){
currentScroll=$(window).scrollTop();
$(window).unbind('scroll',lockscroll);
});私にとってこの問題は主にiOSで発生したため、iOSでのみそれを修正するコードを提供します。
if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)) {
var $modalRep = $('#modal-id'),
startScrollY = null,
moveDiv;
$modalRep.on('touchmove', function(ev) {
ev.preventDefault();
moveDiv = startScrollY - ev.touches[0].clientY;
startScrollY = ev.touches[0].clientY;
var el = $(ev.target).parents('#div-that-scrolls');
// #div-that-scrolls is a child of #modal-id
el.scrollTop(el.scrollTop() + moveDiv);
});
$modalRep.on('touchstart', function(ev) {
startScrollY = ev.touches[0].clientY;
});
}上記の答えはどれも私にとって完璧に機能しませんでした。だから私はうまくいく別の方法を見つけました。
scroll.(namespace)リスナーとのセットscrollTopをdocument最新の値に追加するだけです...
また、閉じるスクリプトでリスナーを削除します。
// in case of bootstrap modal example:
$('#myModal').on('shown.bs.modal', function () {
var documentScrollTop = $(document).scrollTop();
$(document).on('scroll.noScroll', function() {
$(document).scrollTop(documentScrollTop);
return false;
});
}).on('hidden.bs.modal', function() {
$(document).off('scroll.noScroll');
});どうやら、これはクロムではうまく機能しません。それを修正するための提案はありますか？
これは私のために働きました：
$("#mymodal").mouseenter(function(){
$("body").css("overflow", "hidden");
}).mouseleave(function(){
$("body").css("overflow", "visible");
});