ホームページ ウェブフロントエンド jsチュートリアル HTML、CSS、jQuery を使用してカスタム スクロールバーを作成する方法

HTML、CSS、jQuery を使用してカスタム スクロールバーを作成する方法

Oct 25, 2023 am 09:41 AM
css jquery html スクロール・バー カスタマイズ

HTML、CSS、jQuery を使用してカスタム スクロールバーを作成する方法

HTML、CSS、jQuery を使用してカスタム スクロール バーを作成する方法

Web 開発プロセスにおいて、スクロール バーは Scroll Web コンテンツに不可欠なコンポーネントです。ブラウザーはデフォルトでスクロール バーのスタイルと機能をすでに提供していますが、デザインのニーズに合わせてスクロール バーのスタイルをカスタマイズできるようにしたい場合があります。この記事では、HTML、CSS、jQuery を使用してカスタム スクロール バーを作成する方法を紹介し、具体的なコード例を示します。

まず、スクロールする領域とスクロール バー コンテナを含む、単純な HTML 構造が必要です。

1

2

3

4

5

6

7

8

<div class="scroll-area">

  <div class="content">

    <!-- 这里是需要滚动的内容 -->

  </div>

</div>

<div class="scrollbar">

  <div class="thumb"></div>

</div>

ログイン後にコピー

次に、CSS スタイルを使用してスクロール バーとスクロール バー コンテナーを美しくします。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.scroll-area {

  width: 300px;

  height: 200px;

  overflow: hidden;

  position: relative;

}

.content {

  width: 100%;

  height: 1000px; /* 这里是需要滚动的内容的高度 */

}

.scrollbar {

  position: absolute;

  top: 0;

  right: 0;

  width: 10px;

  height: 100%;

  background-color: #eee;

}

.thumb {

  width: 100%;

  height: 50px; /* 这里是滚动条的高度 */

  background-color: #999;

  cursor: pointer;

}

ログイン後にコピー

このようにして、基本的なスクロール バー スタイルを定義しました。

次に、jQuery を使用して、スクロール バーをドラッグしてコンテンツ領域をスクロールするなど、スクロール バーのインタラクティブな効果を実現します。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

$(document).ready(function() {

  var $area = $('.scroll-area'),

      $content = $('.content'),

      $scrollbar = $('.scrollbar'),

      $thumb = $('.thumb');

   

  var contentHeight = $content.height(),

      areaHeight = $area.height(),

      scrollbarHeight = (areaHeight / contentHeight) * areaHeight,

      thumbHeight = scrollbarHeight;

   

  $thumb.height(thumbHeight);

   

  $thumb.draggable({

    axis: 'y',

    containment: 'parent',

    drag: function(event, ui) {

      var dragOffset = ui.position.top,

          scrollbarOffset = (dragOffset / areaHeight) * contentHeight;

       

      $content.css('top', -scrollbarOffset);

    }

  });

});

ログイン後にコピー

このコードでは、コンテンツ領域の高さ、スクロール バー コンテナの高さ、およびスクロール バーの高さを計算することによって、スクロール バーとドラッグ領域の高さを決定します。次に、jQuery UI のドラッグ可能メソッドを使用してスクロール バーをドラッグ可能にし、スクロール バーのドラッグのオフセットを計算することで、スクロール効果を実現するコンテンツ領域のオフセットを設定します。

これまでに、単純なカスタム スクロール バーの実装を完了し、HTML、CSS、および jQuery を通じて関連するコード例を提供しました。

この記事で提供されているコード例は単なる実装方法であり、実際のニーズに応じて調整および拡張できることに注意してください。この記事がカスタム スクロール バーの作成方法の理解に役立つことを願っています。

以上がHTML、CSS、jQuery を使用してカスタム スクロールバーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

HTML のネストされたテーブル

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTMLの表の境界線

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML 左マージン

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルのレイアウト

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML 内のテキストの移動

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリスト

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML の onclick ボタン

PHPでHTML/XMLを解析および処理するにはどうすればよいですか? PHPでHTML/XMLを解析および処理するにはどうすればよいですか? Feb 07, 2025 am 11:57 AM

PHPでHTML/XMLを解析および処理するにはどうすればよいですか?

See all articles