スクロールバー効果を実装するための js/jQ メソッドのまとめ

以前に「HTMLページのスクロールバーに関する設定まとめ」という記事がありましたが、主にCSSでスクロールバーのスタイルや色などを設定する方法についてまとめました。 JS/JQ 経由:

1 . jQuery を使用して 3 次元デジタル スクロール バーを追加する効果を実現する例

jquery を使用して 3 次元デジタル スクロール バーを追加する効果を実現する コードは次のように分割されます。 2 つの部分に分かれており、1 つは HTML 構造で、もう 1 つは JS コードセグメントです。必要な方は参照してください。

2.シンプルな垂直スクロールバーを実装するjs

この記事では、参考になりやすいシンプルな垂直スクロールバーを実装するjsのサンプルコードを中心に紹介します。エディター

3.カスタムスクロールバーをカプセル化するネイティブjsのコードケース共有

この記事では主にカスタムスクロールバーをカプセル化するネイティブjsの関連知識を紹介します。非常に良い基準値を持っています。エディターで見てみましょう

最近、オンライン音楽プレーヤーを作成するプロジェクトがあり、スクロール バーを使用する必要がありましたが、組み込みのスクロール バーが非常に醜いため、カスタム スクロールを考えました。ストリップ。

4.jqueryを使用して外側のスクロールバーのスクロールを禁止します

通常、内側のスクロールバーが両端までスクロールすると、外側のスクロールバーもスクロールに追従しますが、場合によってはユーザーがスクロールすることを望んでいます。外側 (ウィンドウ) スクロール バーをトリガーせずに、現在の領域のみをスクロールできます。 現在の領域を離れた後は、外側のスクロール バーをスクロールできます。ユーザーが誤ってスクロールしすぎて、現在の領域が表示領域から外れてしまう可能性があるためです。

5.スクロールバーが最下部に到達したか上部に到達したかを判断する

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变，与document是不一样的

上部を取得するには、scrollTop()==0の場合にのみ上部を取得する必要があります。一番下では、スクロールトップ()>=$(document).height()-$(window).height() を実行するだけで、一番下までスクロールしたことがわかります

以上がスクロールバー効果を実装するための js/jQ メソッドのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。