https://www.dbj-digital.jp/js/home.js

1// const
2const body = document.body;
3const header = document.querySelector('header');
4const root = document.documentElement;
5
6let resizeTimer = null;
7
8/**
9 * 要素の幅・高さを取得してCSS変数に反映
10 */
11function updateWindowVariables() {
12	const windowWidth = window.innerWidth;
13	const scrollbarWidth = window.innerWidth - document.body.clientWidth;
14	const viewHeight = window.innerHeight;
15	const headerHeight = header ? header.offsetHeight : 0;
16
17	root.style.setProperty('--js-windowWidth', `${windowWidth}px`);
18	root.style.setProperty('--js-scrollbarWidth', `${scrollbarWidth}px`);
19	root.style.setProperty('--js-viewHeight', `${viewHeight}px`);
20	root.style.setProperty('--js-headerHeight', `${headerHeight}px`);
21}
22
23/**
24 * 初期実行
25 */
26updateWindowVariables();
27
28/**
29 * リサイズ完了後に再計算
30 */
31window.addEventListener('resize', function () {
32	clearTimeout(resizeTimer);
33
34	resizeTimer = setTimeout(function () {
35		updateWindowVariables();
36	}, 200);
37});