https://www.fine-kagaku.co.jp/Js/m_fixedBody.js

1/** @type {HTMLElement} rootElm - ドキュメントのルート要素(= html要素). */
2const rootElm = document.documentElement;
3
4/** @type {Element} - ドキュメントのbody要素. */
5const bodyElm = document.body;
6
7/** @type {number} screenWidthView - 画面幅 (viewport). */
8let screenWidthView = window.innerWidth;
9
10/** @type {number} MOBILE_SCREEN_WIDTH - モバイルデバイスを判定する画面幅. */
11const MOBILE_SCREEN_WIDTH = 768;
12
13/** @type {string} SCROLL_STATE_STRING_CLASS - スクロールを固定するCSSのクラス名. */
14const SCROLL_STATE_STRING_CLASS = "is-fixed";
15
16/*
17  ! ↓のスタイルを使用してください !
18
19  html {
20    overflow-y: scroll; // MEMO: スクロール固定時のガター処理
21
22    &[data-scroll-fixed=active] {
23      overflow: hidden;
24    }
25  }
26
27  body {
28    width: 100%;
29
30    &.is-fixed {
31      position: fixed;
32      left: 0;
33    }
34  }
35*/
36
37
38
39
40/**
41 * スクロール固定を有効化する.
42 *
43 * @returns {void}
44 */
45export function fixedBodyOn() {
46  if (screenWidthView < MOBILE_SCREEN_WIDTH) {
47    // モバイル端末のスクロール固定時はスクロールバーを考慮する必要はないため、overflow: hidden;の切り替えだけでok.
48    rootElm.setAttribute("data-scroll-fixed", "active");
49
50  } else {
51    /** @type {number} bodyOffsetY - 現在のスクロール位置. */
52    const bodyOffsetY = window.scrollY;
53
54    bodyElm.style.top = `${-bodyOffsetY}px`;
55    bodyElm.classList.add(SCROLL_STATE_STRING_CLASS);
56  }
57}
58
59
60
61/**
62 * スクロール固定を無効化する.
63 *
64 * @returns {void}
65 */
66export function fixedBodyOff() {
67  rootElm.style.scrollBehavior = "auto";
68
69  if (screenWidthView < MOBILE_SCREEN_WIDTH) {
70    // モバイル端末のスクロール固定時はスクロールバーを考慮する必要はないため、overflow: hidden;の切り替えだけでok.
71    rootElm.setAttribute("data-scroll-fixed", "");
72
73  } else {
74    /** @type {number} offsetY - <body>要素に付与されているスクロール固定位置. */
75    const offsetY = bodyElm.style.top ? Number(bodyElm.style.top.replace("-", "").replace("px", "")) : 0;
76
77    bodyElm.classList.remove(SCROLL_STATE_STRING_CLASS);
78    window.scrollTo(0, offsetY); // position: fixed; 解除後にページトップへ遷移してしまうのを防ぐために必要.
79    bodyElm.style.top = "";
80  }
81
82  rootElm.style.scrollBehavior = "";
83}