Javascript Add Remove Class On Scroll

| | | | | | | | | | | | | | | | | |

スクロールバーとユーザーエクスペリエンス

ユーザーは、Webサイトを閲覧する際のエクスペリエンスに慣れています。たとえば、サイトの左上隅にある会社のロゴがホームページに移動することを期待します。しかし、それが機能しない場合はどうなりますか?このサイトのすべてが、あなたが思っていたものと反対だったとしたらどうでしょうか?

スクロールバーがあったとしても、マウスまたはスライドのスクロールボタンを動かしたときを想像してみてください。デバイスのタッチパッドを指でなぞると、何も起こりません。これは、の恐ろしいユーザーエクスペリエンスと見なされます。

優れたユーザーエクスペリエンスを実現または破壊するものは、それ自体が仕事になる可能性がありますが、その一部として機能します。見た目の理由から、容量とバーがスクロールして非表示になることは間違いありません。

スクロールバーは、Webページに何が表示されるかを示す優れた指標です。スクロールバーが表示された場合、コンテンツを表示するには下にスクロールする必要があると思われます。スクロールバーが表示されない場合は、通常、次の2つの理由のいずれかが原因です。

  1. 表示されるのは、表示される領域(画面)の高さと幅が対応するものです。サイトの高さと幅。
  2. サイトのデザインには、一種の矢印またはアニメーションの機能が含まれており、スクロールによってより多くのコンテンツを利用できることを示します。スクロールを開始したときにのみ、スクロールバーが表示されます。デフォルトでは、それまで非表示のままになります。
  3. 開発者として、スクロールバーを正しく使用すると、サイトのユーザーエクスペリエンスが向上し、顧客はサイトにとどまります。< / p>

注面: 意図的に使用する場合は、必ず水平スクロールバーを使用してください。サイトに意図せずに表示される場合は、通常、コンポーネントのサイズに問題があることが原因です。水平スクロールバーを非表示にしないでください。

CSSの実装

この実装について最初に注意することは、すべての主要なブラウザが同じように作成されていることです。Firefoxで機能するものはChromeでは機能しません。またはInternetExplorerおよびその逆。CSSは、プロバイダープレフィックスまたはブラウザープレフィックスと呼ばれるものを使用して、複数のブラウザーのサポートを提供します。以下にそれらを示します。

< br>

チートシートサプライヤープレフィックス

ベンダープレフィックスブラウザカバー
-webkit- Chrome 、Safari、新しいバージョンのOpera、およびFirefoxforiOSを含むほとんどのiOSブラウザ
-moz- Firefox(iOS以外)
-o- 古いバージョンのOpera
-ms- インターネットエクスプローラーとMSエッジ

URL: クレジット:MDN-CSSプレフィックス

代替テキスト:Mozilla Developer Networkは、どのプレフィックスを記憶するかを覚えておくための便利なチートシートを作成しました使用

キャプション: MDNは、ブラウザに使用するプレフィックスを覚えておくための便利なチートシートを作成しました

次に、問題はどのようになりますかプレフィックスが必要な場合と不要な場合を知っていますか? CSS作成者は、常に新しいプロパティと新しい方法を試しています。十分な数の新しいプロパティがある場合、それはおそらくまだすべてのブラウザと互換性がありません。

幸い、CSSを調べるツールがあります。必要なプレフィックスを追加します。手動で実行して、caneuseドキュメントMDNがブラウザの互換性を判断するのに役立ちます。

コードを聞かせてください

Chromeでこのコードを実行すると、灰色の背景divといくつかのテキストが生成されます。スクロールする。最も一般的な2つの実装が含まれています-Firefoxは