【JavaScript】bodyのスクロールを停止する機能を実装する

Category: JavaScript

Vanilla JSでbodyのスクロールを停止するメソッドを実装したサンプルです。
メニューやモーダル展開時などに利用できます。


See the Pen
Menu Open Scroll stop(body fixed) Vanilla JS
by Kazuma Sakata (@sakata-kazuma)
on CodePen.


HTML・CSS

特別な記述は特にありません。

JS

//スクロール固定オブジェクトセット
const bodyScroll = {
  //スクロール位置保存用プロパティ
  scrollY: 0,

  //スクロール固定用ベースstyle
  styles: {
    position: 'fixed',
    left: 0,
    width: '100%',
    boxSizing: 'border-box',
  },

  //スクロール固定・解除メソッド
  fixed: function(isFixed) {
    //スクロール固定
    if(isFixed) {
      //style追加・更新
      //現在の位置を取得
      this.scrollY = window.pageYOffset || document.documentElement.scrollTop;
      //現在の位置をstyleに設定
      this.styles.top = (this.scrollY * -1) + 'px';

      //スクロールバーの幅取得・設定(ガタツキ防止)
      this.styles.paddingRight = (window.innerWidth - document.body.clientWidth) + 'px'

      //その他のstyleをセット
      Object.keys(this.styles).forEach(function(key) {
        document.body.style[key] = this.styles[key];
      }.bind(this));


    //スクロール固定解除
    } else {
      //styleリセット
      Object.keys(this.styles).forEach(function(key) {
        document.body.style[key] = '';
      });

      //スクロール位置設定
      window.scrollTo(0, this.scrollY);
    }
  }
};

メソッドの呼び出し

任意の場所で以下を実行しメソッドを呼び出してください。

//スクロール停止
bodyScroll.fixed(true);

//スクロール停止解除
bodyScroll.fixed(false);

関連リンク

参考リンク

Category : JavaScript