[JS]Firefoxでのパララックススクロールのもたつきを解消するスクリプト

サイト構築 -JavaScript

Post on:2011年7月6日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

複数の画像を使って視差効果を生み出すパララックススクロールを操作する際、Firefoxで起こるもたつきを解消するスクリプトを紹介します。

Faster parallax scrolling websites in Firefox

[ad#ad-2]

パララックススクロールとは下記のサイトなどで使用されているテクニックで、複数のレイヤーをそれぞれ異なるタイミングでスクロールし、視差効果を生み出すものです。

Nike Better World

Iutopi

ここで紹介するのは、これらのパララックススクロールを操作する際、Firefoxでもたつくのを解消するスクリプトです。
この現象は、IE, Chrome, Safari, Operaでは見られません。

Firefoxでのパララックススクロールのもたつきを解消するスクリプト

下記のスクリプトを使用することで、Firefoxでのもたつきを解消できます。

/*
Firefox super responsive scroll (c) Keith Clark - MIT Licensed
*/
(function(doc) {

  var root = doc.documentElement;

  // Not ideal, but better than UA sniffing.
  if ("MozAppearance" in root.style) {

    // determine the vertical scrollbar width
    var scrollbarWidth = root.clientWidth;
    root.style.overflow = "scroll";
    scrollbarWidth -= root.clientWidth;
    root.style.overflow = "";

    // create a synthetic scroll event
    var scrollEvent = doc.createEvent("UIEvent")
    scrollEvent.initEvent("scroll", true, true);

    // event dispatcher
    function scrollHandler() {
      doc.dispatchEvent(scrollEvent)
    }

    // detect mouse events in the document scrollbar track
    doc.addEventListener("mousedown", function(e) {
      if (e.clientX > root.clientWidth - scrollbarWidth) {
        doc.addEventListener("mousemove", scrollHandler, false);
        doc.addEventListener("mouseup", function() {
          doc.removeEventListener("mouseup", arguments.callee, false);
          doc.removeEventListener("mousemove", scrollHandler, false);
        }, false)
      }
    }, false)

    // override mouse wheel behaviour.
    doc.addEventListener("DOMMouseScroll", function(e) {
      // Don't disable hot key behaviours
      if (!e.ctrlKey && !e.shiftKey) {
        root.scrollTop += e.detail * 16;
        scrollHandler.call(this, e);
        e.preventDefault()
      }
    }, false)

  }
})(document);