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

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

ソースコード

var 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イベントを無効化することになるので、あまり現実的ではないかもしれません。