ホームページ制作 オフィスオバタ

parallax.js のEdge、IEでのブレを直す

動的なwebの手法にパララックスというものがあり、スクリプトなどたくさんでております。
その中で、比較的簡単に導入できる「parallax.js」を導入してみたところ、Edge、IEでスクロールすると、画像がぶれる、がたついたりします。
IE系の独自仕様により発生するため、直接の原因を直すことはできません。

しかし、以下の方法で修正できました。

スムーススクロールプラグインを導入する

直接的な修正が無理なのですが、スクロールカスタマイズプラグインを導入することで、Edge、IEでのスクロールのブレ、がたつきをスムーズにしてくれます。
本来は、スクロールバーのデザインを変更したりするものなのですが、スクロールをスムーズにする効果もあります。
オプション設定なども多々ありましたが、パララックスのスクロールをスムーズにする場合は、以下のような設定だけで動作しました。

■導入方法
<script src=”js/jquery.nicescroll.min.js”></script>
<script>
var nice = false;
$(function()
{
nice = $(“html”).niceScroll();
});
</script>

配布元:inuyaksa/jquery.nicescroll

モバイルバージョンを終了