1. ホーム
  2. jquery

[解決済み] jQueryでページスクロールをプログラム的に無効にする方法

2022-02-10 01:23:15

質問

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

私の考えはこうです。

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

もっといい方法はないのでしょうか?


更新しました。

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

という疑問があることは承知しています。 position: fixed をパネルに貼り付けています。

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

解決方法は?

私が見つけた唯一の方法は、あなたが説明したことと似ています。

  1. 現在のスクロール位置を取得する(水平軸を忘れずに!)。
  2. オーバーフローをhiddenに設定する(おそらく以前のオーバーフロー値を保持したい)。
  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])