1. ホーム
  2. ジャバスクリプト

[解決済み】スクロールを非表示にせずに無効にする方法は?

2022-04-17 20:05:53

質問

ライトボックスを使用中に、親のhtml/bodyスクロールバーを無効にしようとしています。ここでの主な単語は 無効化 . 私は ない で隠したい。 overflow: hidden; .

その理由は、以下の通りです。 overflow: hidden は、サイトをジャンプさせ、スクロールがあった領域を占有させます。

スクロールバーを表示したまま無効にすることが可能か知りたいのですが。

解決方法を教えてください。

オーバーレイの下のページを上部に固定することができれば、オーバーレイを開いたときに、以下の設定を行うことができます。

body { position: fixed; overflow-y:scroll }

をクリックすると、右のスクロールバーは表示されますが、コンテンツはスクロールできなくなります。オーバーレイを閉じるときは、これらのプロパティを

body { position: static; overflow-y:auto }

この方法を提案したのは、スクロールイベントを変更する必要がないためです。

更新

また、ちょっとした改良もできます。 document.documentElement.scrollTop プロパティを、レイヤーが開く直前に javascript で指定すれば、その値を動的に top この方法では、あなたが一番上にいるか、すでにスクロールしているかどうかに関係なく、ページはその場所に立つことになります。

Css

.noscroll { position: fixed; overflow-y:scroll }

JS

$('body').css('top', -(document.documentElement.scrollTop) + 'px')
         .addClass('noscroll');