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

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

WEB
投稿者：WEB上手｜ 2016年9月14日

この記事を簡単に書くと…

スクロールバーをカスタマイズする時はJQueryとCSSで
ほとんどのスクリプトはWindowsタッチパネルの操作では正常に動作しない
「Trackpad Scroll Emulator」だけが唯一、正常に動作することを確認

スクロールバーを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/