最近のプロジェクトにはリアルタイム監視用のモジュールがあります。左側にはすべてのデバイスを表示するためのメニュー バーがあり、これはもちろんデータベースから動的に取得されます。右側には監視画面を表示するための 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 つのスクロール バー。具体的なコードは次のとおりです。