« 2023年03月 | メイン | 2023年07月 »
2023年04月21日
javascriptでcssのプロパティを設定
const setScrollbarWidth = () => {
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
// カスタムプロパティの値を更新する
document.documentElement.style.setProperty('--scrollbar', `${scrollbarWidth}px`);
};
// 表示されたとき
window.addEventListener('load', setScrollbarWidth);
// リサイズしたとき
window.addEventListener('resize', setScrollbarWidth);
style
:root {
--scrollbar: 0;
}
div.wrp {
width: calc(100vw - var(--scrollbar));
}
/style