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 イベントの追加にすぎません。特定のコードは、ダウンロード リソースにあります。

声明：

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

前の記事：ページ下部のpublic jsを読み込む際の注意点のご紹介_javascript Tips次の記事：ページ下部のpublic jsを読み込む際の注意点のご紹介_javascript Tips

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル