スクロールを一時的に無効にする方法

Javascriptで一時的にスクロールを無効にする方法を紹介します。

ソースコード

const preventScroll = {
	x: 0,
	y: 0,
	setPos(x = window.pageXOffset, y = window.pageYOffset) {
		this.x=x;
		this.y=y;
	},
	handleEvent() {
		window.scrollTo(this.x, this.y);
	},
	enable() {
		this.setPos();
		window.addEventListener("scroll", this);
	},
	disable() {
		window.removeEventListener("scroll", this);
	}
};

使用方法

preventScroll.enable();		//有効化
preventScroll.disable();	//無効化

仕組み

Javascriptでscrollイベントを監視し、イベントが発生したときにもとのスクロール位置に戻す処理を行っています。

その他

• HTMLの構成によっては一瞬スクロールが起きてしまうことがあります(すぐに元の位置に戻りますが)
• scrollイベントの仕様上、preventDefault()で無効化できません。
• scrollイベントを監視する方法以外にも、wheelイベントを監視してpreventDefault()で無効にすることもできます。ただし、スマートフォン対応の際にtouchmoveイベントを無効化することになるので、あまり現実的ではないかもしれません。