Javascript

【scrollmagic】で固定背景がIE11でカクカクするのを解消する方法

要素を止めたり、パララックスエフェクトを実装する時【scrollmagic】が便利ですよね。

今回は、【scrollmagic】で要素を止めた時に、IE11でカクカクしてしまう現象が起こったので対処法メモとデモです。

そもそも【scrollmagic】とは何?という方は、以下の記事も参考にしてください。

【scrollmagic】でIE11だとカクカクするデモ

まずは実際に【scrollmagic】を使用したデモをIE11で確認してみてください。scrollmagicを使用して、背景のcanvas要素をピン留めしています。

以下のデモはIE11で確認すると、背景の要素がスクロールに合わせて上下にカクカクしてしまっています。(他のブラウザでは影響ありません)

IE11で要素がカクカクしないようにコードを追記したデモが以下になります。スクロールをしても、要素がカクカクしないように改善されているのが分かるかと思います。

IE11で固定背景がカクカクしてしまう原因

IE11で要素を固定した際にカクカクしてしまう原因は、IE11のスムーススクロール機能が原因になっているそうです。以下参考記事。

「IE11」でスクロール時に固定背景画像がカクつく問題

その為、IE11のスムーススクロール機能をJavascriptでOFFにしてしまえば、【scrollmagic】で要素を固定してもカクカクしないようになります。

IE11で要素がカクカクしてしまう時の対処法

それでは、IE11に対応するためのコードを確認していきましょう。

Javascript

	/* IE11でのsetPinバグを解消 */
	var userAgent = window.navigator.userAgent.toLowerCase();
	var isIE = (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0);
	if (isIE) {
		$('body').on('mousewheel', function () {
			event.preventDefault();
			var wheelDelta = event.wheelDelta;
			var currentScrollPosition = window.pageYOffset;
			window.scrollTo(0, currentScrollPosition - wheelDelta);
		});
	}

IE11にのみ、コードを適用させるため、ユーザーエージェントで分岐させます。

	/* ユーザーエージェントで分岐 */
	var userAgent = window.navigator.userAgent.toLowerCase();
	var isIE = (userAgent.indexOf('msie') >= 0 || userAgent.indexOf('trident') >= 0);
	if (isIE) {
     //ここにIE11用のコードを記載
	}

スクロール時にカクカクするのを防ぐために、IE11のスムーススクロール機能をOFFにするコードを記載します。

	if (isIE) {
		$('body').on('mousewheel', function () {
			event.preventDefault();
			var wheelDelta = event.wheelDelta;
			var currentScrollPosition = window.pageYOffset;
			window.scrollTo(0, currentScrollPosition - wheelDelta);
		});
	}

最後に

今回は、【scrollmagic】で要素を止めた時にIE11でカクカクするのを防ぐ方法をご紹介いたしました。

【scrollmagic】はIE11でも使用する事が出来るので、IE11特有のバグの対処法を知っておくと作業がスムーズです。

プログラミング言語の人気オンラインコース