スクロールバーをCSSでカスタマイズできるJQueryはWindowsでは正常に動作しない？！

スクロールバーはデフォルトのものだと、デザインに合わない。。。　というようなことがあるかと思います。特に、タブレット用のUIを制作したりする時は、余計にスクロールバーはカスタマイズして使うことが多いのではないでしょうか。

考えられる使い方としては、iPadやWindowsタブレットの限られた画面で、overflowで要素をスクロールできるようにする場合。Windowsの標準のスクロールバーだと、複数表示されているとスッキリしないですよね。そんな時にスクロールバーをCSSでカスタマイズできるようなJQueryがあります。

ほとんどのスクリプトはWindowsタッチパネルでは動作せず

有名どころだと「jScrollPane」や「jQuery custom content scroller」などがあります。
これらのスクリプトは、もちろん色々なOSやブラウザで動作することが確認されています。また「jquery.mousewheel.js」を読み込ませることで、マウスホイールにも対応します。

しかし、Windowsタブレットなど、Windowsをタッチパネルで操作するような場合には、正常に動作しなくなるのです。確かに、Windowsタブレットは、AndroidやiOSほど普及していない為、動作環境としては盲点だったのかもしれません。

overflowなどにこれらのスクリプトを適用させた部分をタッチして、スクロールしようとしても、全体にくっついてしまっているような状態になり、スクロールできないのです。

私が試したところ、「jScrollPane」や「jQuery custom content scroller」は正常に動作しませんでした。テスト環境はWindows 10のGoogle Chrome 52、edge 25、IE11でのタッチパネル操作になります。

他にも「NiceScroll」や「scrollpanel」など、色々と試してみましたが、ほぼ全滅です。
そして唯一、「perfect-scrollbar」と「Trackpad Scroll Emulator」が動作しました！

perfect-scrollbarは最新版に不具合？

ただ「perfect-scrollbar」は、最新版のバージョン0.6だと、エラーが出てしまい動作しませんでした。ダウンロードしたサンプルを実行してみても正常に動作していません。そこで古いバージョン（0.4）をダウンロードして使えること確認したのですが、今度はWindowsのタッチパネルに対応しておらず。。。

demoでは動いていたので、何とかならないものかと試行錯誤したのですが、結局動きませんでした。最終的に、私が確認したスクリプトでは「Trackpad Scroll Emulator」で唯一、正常に動作しました。

Trackpad Scroll EmulatorがWindowsタッチパネルに対応

私の試した中では、「Trackpad Scroll Emulator」が唯一、Windowsのタッチパネルでの操作に対応していました。といっても、スクロールバーをカスタマイズするスクリプトは、そんなに種類があるわけではないので、もしかすると、正常に動作するのはこれだけかもしれません。縦スクロールでも横スクロールでも使えます。

・Trackpad Scroll Emulator
https://github.com/jnicol/trackpad-scroll-emulator

・デモ
http://jnicol.github.io/trackpad-scroll-emulator/

まとめ

まさか、Windowsのタッチパネルだと動作しないとは、気づきませんでした。
タブレット端末でないと、タッチパネルであってもなかなかタッチして操作しようとは思いませんよね。。。

AndroidやiPhoneなどでは、正常に動作していたので、まさか動かないとは。
色々な可能性を考えて動作確認はしないといけないですね！

関連記事