JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介

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

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

  • スクロールバーをカスタマイズする時は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/

まとめ

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

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

この記事をSNSでシェアする

関連記事

こちらの記事も読まれています

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

カテゴリー

このサイトについて

JavaScript・PHP・Vue.jsのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com