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

2019年10月17日

動的な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

今回のレポートは以上です。
読んでいただいてありがとうございました。


ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
ホームページのご提案もさせていただいております