スクロールバーをCSSでカスタマイズできるJQueryはWindowsでは正常に動作しない?!
- WEB
- 投稿者:WEB上手 | 2016年9月14日
この記事を簡単に書くと…
- スクロールバーをカスタマイズする時はJQueryとCSSで
- ほとんどのスクリプトはWindowsタッチパネルの操作では正常に動作しない
- 「Trackpad Scroll Emulator」だけが唯一、正常に動作することを確認
スクロールバーはデフォルトのものだと、デザインに合わない。。。 というようなことがあるかと思います。特に、タブレット用の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などでは、正常に動作していたので、まさか動かないとは。
色々な可能性を考えて動作確認はしないといけないですね!
関連記事
こちらの記事も読まれています
音量アイコンが反応しない場合の対処法(Windows 10)(3.3k view)
「ヒラギノ角ゴ」にソックリ!無料で使えるOpen Type フォント「...(3.2k view)
プリンターの状態が「要確認」と表示されて印刷できない場合の復旧方法(2.2k view)
「光回線受付センター」はNTTではないので注意!光コラボとは?(822 view)
iPhone等のスマホで<video>タグの動画が表示され...(792 view)
【詐欺メールに注意】お客様のAmazonプライム会員資格は、2019/...(701 view)
MW WP Formでメールが届かない・送信されない場合の対処法(647 view)
J:COM(ジェイコム)の無料メールアドレスの追加設定方法(636 view)
Windowsで「更新してシャットダウン」が消えない場合の対処法(612 view)
迷惑メール?「MAILER-DAEMON」から大量にメールが届く場合は...(475 view)
コメントする