【更新日 : 】
【JavaScript】bodyのスクロールを停止する機能を実装する
- Category：
- JavaScript
- Tags：
- body固定, JavaScript, Vanilla JS, スクロール
Vanilla JSでbodyのスクロールを停止するメソッドを実装したサンプルです。
メニューやモーダル展開時などに利用できます。
オブジェクト版
See the Pen Menu Open Scroll stop（body fixed） Vanilla JS by web_nak (@web_walking_nak) on CodePen.
HTML・CSS
特別な記述は特にありません。
JavaScript
//スクロール固定オブジェクトセット
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);関数版
オブジェクト版と機能は同じで export, importできるよう関数化したものです。
<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="gOjOPQB" data-user="web_walking_nak" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/web_walking_nak/pen/gOjOPQB">
Menu Open Scroll stop function（body fixed） Vanilla JS</a> by web_nak (<a href="https://codepen.io/web_walking_nak">@web_walking_nak</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>JavaScript
//スクロール固定関数
const bodyScrollFixed = isFixed => {
//スクロール固定用ベースstyle
const styles = {
position: 'fixed',
top: 0,
left: 0,
width: '100%',
boxSizing: 'border-box',
paddingRight: 0
};
const body = document.body;
//スクロール固定
if(isFixed) {
//style設定
const scrollY = window.pageYOffset || document.documentElement.scrollTop;
styles.top = (scrollY * -1) + 'px';
styles.paddingRight = (window.innerWidth - document.body.clientWidth) + 'px';
Object.keys(styles).forEach( key => {
body.style[key] = styles[key];
});
body.classList.add('is-fixed');
} else {
//スクロール固定解除
//スクロール位置取得
const scrollY = parseInt(body.style.top || '0');
//style解除
Object.keys(styles).forEach( key => {
body.style[key] = '';
});
body.classList.remove('is-fixed');
//スクロール位置設定
window.scrollTo(0, scrollY * -1);
}
}HTML・CSS
特別な記述は特にありません。
関数の呼び出し
任意の場所で以下を実行し関数を呼び出してください。
//スクロール停止
bodyScrollFixed(true);
//スクロール停止解除
bodyScrollFixed(false);