web-dev-qa-db-ja.com

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

JQueryを使って、私は体のスクロールを無効にしたいです。

私の考えは：

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

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

更新：

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

私は誰かが「なぜ彼はパネルにposition: fixedを使わないのですか？」と考えるようになるでしょう。

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

jquerycssscroll
150
Hailwood

私がこれを行うことを発見した唯一の方法はあなたが説明したものと似ています：

  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])
127
tfe

これは完全にスクロールを無効にします。

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

復元するには：

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

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

211
gitaarik

これを試して

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})
44
cubbiu

あなたはこのコードを使うことができます：

$("body").css("overflow", "hidden");
26
mr.soroush

私は 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);
}

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

25
JeanValjean

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

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

リセットする：

$(window).off('scroll');
20
Patrick DaVader

イベントをスクロールしてそのデフォルトの振る舞いを防ぐために関数を添付することができます。

var $window = $(window);

$window.on("mousewheel DOMMouseScroll", onMouseWheel);

function onMouseWheel(e) {
    e.preventDefault();
}

https://jsfiddle.net/22cLw9em/

5
dzimi

これを処理するjQueryプラグインを書きました。$。disablescroll。

マウスホイール、タッチ移動、キープレスなどのイベントからのスクロールを防止します。 Page Down。

デモはこちらがあります。

使用法：

$(window).disablescroll();

// To re-enable scrolling:
$(window).disablescroll("undo");
5
Josh Harrison

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

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

編集：とにかくjQueryは必要ありません。VanillaJSの上記と同じです（つまり、フレームワークがないこと、JavaScriptだけが必要です）。

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

this.documentElement.scrollTop - 標準

this.body.scrollTop - IE互換性

4
Pawel

身長を100％に設定してオーバーフローを非表示にすることはできませんか。 http://jsbin.com/ikuma4/13/edit を参照してください。

3
Adrian Schmidt

私はここに役立つかもしれない答えを入れました： jQuery simplemodalスクロールを無効にします

テキストを移動せずにスクロールバーをオフにする方法を示します。あなたはsimplemodalに関する部分を無視することができます。

2
mhenry1384

これはあなたの目的にはうまくいくかもしれないし、うまくいかないかもしれませんが、スクロールする前に jScrollPane を拡張して他の機能を起動することができます。私はほんの少しだけこれをテストしましたが、私はあなたが飛び込んでスクロールを完全に防ぐことができることを確認することができます。私がしたのは、

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

Events.htmlを起動すると、コーディングのためにスクロールしない通常のスクロールボックスが表示されます。

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

ですから、おそらく次のステップは他の機能への呼び出しを追加することです。それはあなたの固定の魔法をかけ、そしてスクロールを続けるかどうかを決定します。また、scrollTopとscrollLeftを設定するためのAPI呼び出しもあります。

あなたがより多くの援助を望むならば、あなたが起きるところに投稿してください！

これが役に立ったことを願っています。

2
Jeremy Warne
  • スクロールを隠すには：$("body").css("overflow", "hidden");
  • スクロールを復元するには：$("body").css("overflow", "initial");
2
Joan Alberto Aguilar Peña

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

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

復元するには：

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

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

    $(function() { 
        // ...

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

        // ...
    });
1
Jopie

キーボードナビゲーションでスクロールを無効にしたいだけなら、keydownイベントをオーバーライドすることができます。

$(document).on('keydown', function(e){
    e.preventDefault();
    e.stopPropagation();
});
1
sean

DOMを使ってそうすることもできます。あなたがこのように呼ぶ関数があるとしましょう：

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

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

0
Brendan

これは私がやってしまったものです：

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
Marz

誰かが私の解決策を試したかどうかわからない。これは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

これが誰かに役立つことを願っています。

0
FossilMFC

あなたはページ上のコンテンツのスクロールを防ぐためにスクロール可能な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();
}
0
Appex

私は最善かつクリーンな解決策だと思います：

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)
})

これらのイベントリスナーはスクロールをブロックします。スクロールを有効にするためにそれらを削除するだけです。

0
Tiziano

（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])

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

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

私はこれが他のどの解決策よりも正しい修正であると言うことを試みるつもりですが、私はそれをまだテストしていませんまだ… ：P

編集：私はこれがタッチデバイス上でどのくらいひどく実行されるかもしれない（読む：爆破する）手がかりを持っていないことに注意してください。

0
Matthematics