div jquery_jquery を使用してスクロール バーのスタイルをカスタマイズする 2 つの方法

最近のプロジェクトにはリアルタイム監視用のモジュールがあります。左側にはすべてのデバイスを表示するためのメニュー バーがあり、これはもちろんデータベースから動的に取得されます。右側には監視画面を表示するための iframe があります。 。当初、この機能は複雑ではありませんでしたが、左側のメニュー項目は dtree.js を使用して実装されました。しかし、機能が完成した後、左側のメニュー バーの一部のデバイス名が非常に長いことが判明しました。要件を超えています。正確に言うと、div の長さが左側の iframe の幅と長さが不十分です。次に、この時点でスクロール バーを使用する必要があります。これにより、左側のメニュー項目 div の overflow-x:auto;overlfow-y:auto; が自動的に生成されます。 1つは見栄えが良くありません。次は重要なポイントですが、スクロールバーのスタイルを変更する方法です。

インターネットで検索し続けた結果、2 つの方法があることがわかりました:

最初の方法: CSS が提供するスタイルを使用します。合計 8 つの属性があります。ここでは詳しく紹介しません。これに関する情報はインターネット上にたくさんあります。

2 番目の方法: 新しいスクロール バーを自分で作成します。つまり、div に付属のスクロール バーは使用しません。このようにして、必要な効果を得ることができます。具体的な実装については、インターネットでいろいろ調べたところ、基本的には垂直スクロールバーのみで水平スクロールバーは存在しなかったので、仕方なくjqueryを使って別のスクロールバーを作成しました。垂直スクロールバーがありました。

具体的な実装のアイデアについて説明します。ターゲット div は、スクロール バーを生成する必要がある div です。その中には、コンテンツを表示する div_content、垂直スクロール バーを表示する div_H の 3 つの div がネストされています。バーの div_W の特定のレイアウトは、独自のスクロール バーを持つ div と同じであり、スクロール バーを表示する div、つまり div_H と div_W には、それぞれ 3 つの div (左と左の 2 つ) が含まれます。右矢印と 1 つのスクロール バー。具体的なコードは次のとおりです。

コードをコピー コードは次のとおりです。

if( $(_self).children (".jscroll-c").height()==null){
//コンテンツ ボックス (div) を追加
$(_self).wrapInner("

");
//垂直スクロールバーを追加
$ (_self).append ("

< ;/div>

");
//水平スクロールバーを追加します
$(_self).append("

");
}

そうすると、div の内容が div の範囲を超えているかどうかの何らかの判断と、listen イベントの追加にすぎません。特定のコードは、ダウンロード リソースにあります。