jQueryを使用してプログラムでページスクロールを無効にする方法

163

jQueryを使用して、本文のスクロールを無効にしたいと思います。

私の考えは：

  1. セットする body{ overflow: hidden;}
  2. 現在をキャプチャ scrollTop();/scrollLeft()
  3. bodyスクロールイベントにバインドし、scrollTop / scrollLeftをキャプチャした値に設定します。

もっと良い方法はありますか？

更新：

私の例とその理由をhttp://jsbin.com/ikuma4/2/editで見てください

私は誰かが「なぜ彼は単にposition: fixedパネルで使用しないのですか？」と考えていることを知っています。

他の理由があるので、これを提案しないでください。

jquery  css  scroll 
— ヘイルウッド
ソース
7
「もっと良い方法はありますか？」-ブラウザを正常に動作させる以外に？
— Fenton
22
「メロドラマティックに」？
— Mike Weller
6
おそらく、プログラムで意味しますか？それは「プログラム的に」のためのFirefoxのトップスペル修正の提案なので
— Michael Shimmins
4
このスレッドは\ b \になります
— Cipi
3
@Sohneeがスクロールを無効にする！==悪い
— Mansiemans

回答:

136

私がこれを行うことがわかった唯一の方法は、あなたが説明したものに似ています：

  1. 現在のスクロール位置をつかみます（横軸を忘れないでください！）。
  2. オーバーフローを非表示に設定します（おそらく以前のオーバーフロー値を保持したいでしょう）。
  3. scrollTo（）を使用して、ドキュメントを保存されたスクロール位置にスクロールします。

次に、再度スクロールできるようになったら、すべて元に戻します。

編集：私はそれを掘り起こすためにトラブルに行ったので、私はあなたにコードを与えることができない理由はありません...

// lock scroll position, but retain settings for later
var scrollPosition = [
  self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
  self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);


// un-lock scroll position
var html = jQuery('html');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
— tfe
ソース
2
jsbin.com/ikuma4/2/editを参照して、あなたの方が良い理由を教えてください。私は何かが足りないのですか（私の例と比較して、あなたの回答の長さに理由が見当たらないので尋ねます）
— Hailwood
3
あなたのアプローチはIE7では機能しません。私も最初に試しました。問題は、スクロールイベントに十分な速さで反応しないことです。これにより、ドキュメントがスクロールし、JSがスクロール位置を必要な場所にリセットすると、ドキュメントが元に戻ります。
— 2010
1
また、ボディに以外のオーバーフローがあった場合auto、上書きされます。既存の設定を保持する必要があったため、オーバーヘッドも増えました。
— 2010
単にスタイリングhtmlとbodywith だけでoverflow: hiddenは不十分な理由を誰かが知っていますか？イベントハンドラが必要になります。
— kpozin
4
これは素晴らしい答えです。タッチデバイスで動作させるには、この回答を確認してください。
— Patrick
235

これにより、スクロールが完全に無効になります。

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

復元するには：

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

FirefoxとChromeでテストしました。

— ギタリック
ソース
18
期待どおりに動作します。ありがとう！これは受け入れられるべき答えでした！
— Dave Chen
6
引き続き、クロムの中央マウスボタンでスクロールします。
— Lothar 2013
16
これにより、現在のスクロール位置が失われます。OPはスクロール位置のキャプチャーについて明確に述べたので、彼はそれを要求したと思います。とにかく、私はそれを必要とするので、これは私には限られた用途である
— zerm
7
PS省略するとheight: 100%、ジャンプせずに現在の位置でスクロールがロックされます-少なくとも最新のChromeでは。
— zerm 2013年
2
これは正解ではありません。スクロール位置はキャプチャされません
— taylorcressy 2014年
43

これを試して

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})
— cubbiu
ソース
ちょうど私が探していたもの...ほぼ。とにかく矢印キーの間にそれを無効にするには？
— コーディ14
2
@Cody-これをCSSオーバーフローと組み合わせる：非表示
— Darius.V '11 / 07/14
2
@cubbiuそれを逆にする方法？
— Meer
3
使用できます$('#element').off('scroll touchmove mousewheel');
— arnuschky 2014年
1
素晴らしいソリューション。bodyスクロールを無効にするだけで、他の子要素内でのスクロールを許可するにはどうすればよいoverflow: scrollですか？
— Fizzix
27

私はtfeによってソリューションに少しチューニングを提供します。特に、スクロールバーがに設定されているときにページコンテンツのシフト（ページシフト）が発生しないように、いくつかの追加コントロールを追加しましたhidden。

ページスクロールをロックおよびロック解除するために、それぞれ2つのJavaScript関数lockScroll()をunlockScroll()定義できます。

function lockScroll(){
    $html = $('html'); 
    $body = $('body'); 
    var initWidth = $body.outerWidth();
    var initHeight = $body.outerHeight();

    var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
    ];
    $html.data('scroll-position', scrollPosition);
    $html.data('previous-overflow', $html.css('overflow'));
    $html.css('overflow', 'hidden');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);   

    var marginR = $body.outerWidth()-initWidth;
    var marginB = $body.outerHeight()-initHeight; 
    $body.css({'margin-right': marginR,'margin-bottom': marginB});
} 

function unlockScroll(){
    $html = $('html');
    $body = $('body');
    $html.css('overflow', $html.data('previous-overflow'));
    var scrollPosition = $html.data('scroll-position');
    window.scrollTo(scrollPosition[0], scrollPosition[1]);    

    $body.css({'margin-right': 0, 'margin-bottom': 0});
}

ここで私は<body>初期マージンがないと仮定しました。

上記のソリューションはほとんどの実際的なケースで機能しますが、たとえばを含むヘッダーを含むページに対してさらにカスタマイズが必要になるため、確定的なものではないことに注意してくださいposition:fixed。例を挙げて、この特別なケースを見てみましょう。持っているとします

<body>
<div id="header">My fixedheader</div>
<!--- OTHER CONTENT -->
</body>

と 

#header{position:fixed; padding:0; margin:0; width:100%}

次に、関数lockScroll()とに以下を追加する必要がありますunlockScroll()：

function lockScroll(){
    //Omissis   


    $('#header').css('margin-right', marginR);
} 

function unlockScroll(){
    //Omissis   

    $('#header').css('margin-right', 0);
}

最後に、マージンまたはパディングの可能な初期値に注意してください。

— ジャンバルジャン
ソース
4
javascript $ body.css（{'margin-right'：0、 'margin-bottom'、0}）;にエラーがあります。$ body.css（{'margin-right'：0、 'margin-bottom'：0}）;
— Johansrk 2013年
実際には、次のように使用marginRightしますmarginLeft:)
— Martijn
25

このコードを使用できます：

$("body").css("overflow", "hidden");
— ミスター・ソロッシュ
ソース
8
引き続き、マウスの中ボタンを使用してスクロールできます。
— ロジャーファー
2
いいえ、これで問題ありません。これでスクロールすることはできません。
— mr.soroush 2013年
いくつかの余分なcssを使用すると、スクロールを完全に無効にできます。詳細については、私の回答を参照してください。
— gitaarik 2013年
21

スクロールをオフにするには、これを試してください：

var current = $(window).scrollTop();
$(window).scroll(function() {
    $(window).scrollTop(current);
});

リセットするには：

$(window).off('scroll');
— パトリック・ダバダー
ソース
これは私が必要とするものに対する素晴らしい解決策でした。
— Terry Carter
@EveryScreamerいいえ、画面がおかしくなります。回避策を見つけようとしています。
— Telarian
5

これを処理するjQueryプラグインを作成しました：$ .disablescroll。

マウスホイール、タッチムーブ、およびのようなキープレスイベントからのスクロールを防ぎPage Downます。

ここにデモがあります。

使用法：

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");
— ジョシュ・ハリソン
ソース
disablescroll（）プラグインを使用して、mouswheel / scrollイベントを聞いてスクロールを一時的に無効にしようとしましたが、機能しません。その効果を達成する方法を知っている可能性はありますか？
— イエローセントの
@JB私はおそらく助けることができますが、コメントは最高の場所ではありません。このスタックオーバーフローチャットで私に参加し、私は私が何ができるかわかりますchat.stackoverflow.com/rooms/55043/disablescroll-usage
— ジョシュ・ハリソン
申し訳ありませんが、このプラグインはjsfiddleでは機能しません。
— markj
動作していないように見えるブラウザ/プラットフォームを教えてください。
— Josh Harrison
4

マウスの中央ボタンを含むスクロールを無効にする1つのライナー。

$(document).scroll(function () { $(document).scrollTop(0); });

編集：とにかくjQueryの必要はありません、以下はバニラJSでの上記と同じです（つまり、フレームワークはなく、JavaScriptのみです）：

document.addEventListener('scroll', function () { this.documentElement.scrollTop = 0; this.body.scrollTop = 0; })

this.documentElement.scrollTop-標準

this.body.scrollTop-IE互換性

— パウェル
ソース
3

誰かがこのコードを投稿しましたが、復元するとスクロール位置が保持されないという問題があります。その理由は、人々はそれをhtmlとbodyまたはbodyだけに適用する傾向があるが、htmlのみに適用する必要があるためです。このようにして、スクロール位置が復元されたときに保持されます。

$('html').css({
    'overflow': 'hidden',
    'height': '100%'
});

復元するには：

$('html').css({
    'overflow': 'auto',
    'height': 'auto'
});
— メスカリナ
ソース
'overflow': 'auto',使用しない'overflow': 'initial',
— evtuhovdo
2

これは目的に応じて機能する場合と機能しない場合がありますが、jScrollPaneを拡張して、スクロールする前に他の機能を起動できます。私はこれを少しだけテストしましたが、ジャンプしてスクロールを完全に防ぐことができることを確認できます。私がしたことは：

  • デモzipをダウンロード：http : //github.com/vitch/jScrollPane/archives/master
  • 「イベント」デモ（events.html）を開きます
  • それを編集して、縮小されていないスクリプトソースを使用します。 <script type="text/javascript" src="script/jquery.jscrollpane.js"></script>
  • jquery.jscrollpane.js内に「戻り値」を挿入します。666行目（縁起の良い行番号！バージョンが少し異なる場合は、これがpositionDragY(destY, animate)関数の最初の行です）

events.htmlを起動すると、通常はスクロールするボックスが表示されますが、コーディングの介入によりスクロールできません。

この方法でブラウザのスクロールバー全体を制御できます（fullpage_scroll.htmlを参照）。

したがって、おそらく次のステップは、他の関数の呼び出しを追加してアンカーマジックを実行し、スクロールを続行するかどうかを決定することです。また、scrollTopとscrollLeftを設定するAPI呼び出しもあります。

さらにサポートが必要な場合は、最新の情報を投稿してください。

これがお役に立てば幸いです。

— ジェレミー・ウォーン
ソース
1

キーボードナビゲーションによるスクロールを無効にするだけの場合は、keydownイベントをオーバーライドできます。

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});
— ショーン
ソース
1

このコードを試してください：

    $(function() { 
        // ...

        var $body = $(document);
        $body.bind('scroll', function() {
            if ($body.scrollLeft() !== 0) {
                $body.scrollLeft(0);
            }
        });

        // ...
    });
— ジョピー
ソース
0

ページ上のコンテンツのスクロールを防ぐために、スクロール可能なdivでウィンドウを隠すことができます。また、表示と非表示を切り替えることで、スクロールをロック/ロック解除できます。

このようなことをしてください：

#scrollLock {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: scroll;
    opacity: 0;
    display:none
}

#scrollLock > div {
    height: 99999px;
}

function scrollLock(){
    $('#scrollLock').scrollTop('10000').show();
}

function scrollUnlock(){
    $('#scrollLock').hide();
}
— Appex
ソース
7
「u」や「smth」などの略語は使用しないでください。読みやすくするために、時間をかけてスペルを正しくしてください。
— ブリキ男
0

（を介してmargin:0 auto;）レイアウトを中央に配置position:fixedしたユーザーのために、@ tfeが提案するソリューションとともにソリューションのマッシュアップを示します。

ページスナップが発生している場合（スクロールバーの表示/非表示のため）は、このソリューションを使用してください。

// lock scroll position, but retain settings for later
var scrollPosition = [
    window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
    window.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
];
var $html = $('html'); // bow to the demon known as MSIE(v7)
$html.addClass('modal-noscroll');
$html.data('scroll-position', scrollPosition);
$html.data('margin-top', $html.css('margin-top'));
$html.css('margin-top', -1 * scrollPosition[1]);

…と組み合わせ…

// un-lock scroll position
var $html = $('html').removeClass('modal-noscroll');
var scrollPosition = $html.data('scroll-position');
var marginTop = $html.data('margin-top');
$html.css('margin-top', marginTop);
window.scrollTo(scrollPosition[0], scrollPosition[1])

...そして最後に、のためのCSS .modal-noscroll...

.modal-noscroll
{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
}

これは他のどのソリューションよりも適切な修正であると思いますが、まだ十分にテストしていません…：P

編集：タッチデバイスでこれがどれほどひどく機能するか（読み：爆発）の手がかりがないことに注意してください。

— 数学
ソース
0

そのためにDOMを使用することもできます。次のように呼び出す関数があるとします。

function disable_scroll() {
document.body.style.overflow="hidden";
}

これですべてです。これが他のすべての答えに加えて役立つことを願っています！

— ブレンダン
ソース
0

これは私がやったことです：

CoffeeScript：

    $("input").focus ->
        $("html, body").css "overflow-y","hidden"
        $(document).on "scroll.stopped touchmove.stopped mousewheel.stopped", (event) ->
            event.preventDefault()

    $("input").blur ->
        $("html, body").css "overflow-y","auto"
        $(document).off "scroll.stopped touchmove.stopped mousewheel.stopped"

JavaScript：

$("input").focus(function() {
 $("html, body").css("overflow-y", "hidden");
 $(document).on("scroll.stopped touchmove.stopped mousewheel.stopped", function(event) {
   return event.preventDefault();
 });
});

$("input").blur(function() {
 $("html, body").css("overflow-y", "auto");
 $(document).off("scroll.stopped touchmove.stopped mousewheel.stopped");
});
— マルツ
ソース
0

誰かが私の解決策を試したかどうかはわかりません。これはbody / html全体で機能しますが、スクロールイベントを発生させるあらゆる要素に適用できることは間違いありません。

必要に応じてscrollLockを設定および設定解除するだけです。

var scrollLock = false;
var scrollMem = {left: 0, top: 0};

$(window).scroll(function(){
    if (scrollLock) {
        window.scrollTo(scrollMem.left, scrollMem.top);
    } else {
        scrollMem = {
            left: self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
            top: self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        };
    }
});

これがJSFiddleの例です

これが誰かを助けることを願っています。

— FossilMFC
ソース
これは、1つの例外を除いて、正常に機能します。巻物がロックされているときにスクロールすると、実際に巻物をロックする前に少しひねります
— Thomas Teilmann
0

私は最良かつクリーンなソリューションは次のとおりだと思います：

window.addEventListener('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y);
});

そしてjQueryで：

$(window).on('scroll',() => {
    var x = window.scrollX;
    var y = window.scrollY;
    window.scrollTo(x,y)
})

これらのイベントリスナーはスクロールをブロックする必要があります。削除してスクロールを再度有効にしてください

— ティizィアーノ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.