11

UI に Twitter Bootstrap を使用して単純な Web アプリケーションの作業を開始しました。overflow-y プロパティを持つ div があります。デフォルトのスクロールバーを取り除き、この例のように jquery を使用してクールなカスタム スクロールバーを使用したいと考えました。次の形式のネストされた div で前の例を試しました。

<div class="row fill"> <div id="users" class="span3 offset1"> <!-- left navigation Pane --> <div id="contentWrapper" class="span7 fill"> <div>Scrollable content here </div>

しかし、カスタムスクロールバーを実装しようとすると、デフォルトのスクロールバーが表示され、開発者ツールで検査すると、カスタムコンポーネントがページの上部にあり、表示されません。ブートストラップの固定グリッド レイアウトでカスタム スクロールバーの使用を開始する方法はありますか? これに関する適切なリソースはありますか? ご協力をお願いいたします。

私は問題がどこにあるのかを理解したと思います。上記のjqueryの例を踏襲すると、スクロール可能なはずのコンテンツdivが実行中に変更され、次のdiv構造が追加されました。

<div class="content mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox" id="mCSB_1">
<div class="mCSB_container mCS_no_scrollbar">
<div class="mCSB_scrollTools"> ....... </div>
</div>
</div></div>

コンテンツ div にデータが既に存在する場合、変更されたコード片は mCSB_container mCS_no_scrollbar 内にそれを持ち、ここに見られるように正常に動作します。しかし、コンテンツ div がユーザー入力に動的に追加されると、実行中にテキストが「mCSB_container mCS_no_scrollba」div ではなく「コンテンツ」に追加されます。それを機能させる方法はありますか？ご協力いただきありがとうございます。

4

1 に答える 1

2

まず、カスタム スクロールバーを使用する際には注意が必要です。このアイデアは魅力的に聞こえますが、これは簡単に実行できるように思えますが、実際には正しく行うのがかなり難しいことの 1 つであることを発見しました。 . 人々は皆、ブラウザのネイティブ スクロールの仕組みに慣れていることに注意してください。さらに、多くのユーザーがシステムのデフォルトのスクロール設定を変更する可能性があり、その結果、ソリューションが予想とは異なる速度でスクロールする可能性があります。ユーザーが期待する機能や機能 (クリックしてスクロールする、マウスホイールなど) から離れすぎると、カスタム ソリューションが目立たなくなり、ネイティブのスクロールバーよりもはるかに使いにくくなります。

それを念頭に置いて、独自のソリューションを展開しようとするのではなく、既存のソリューションを使用するのが最善だと思います. 私はjScrollPaneをお勧めします- 私は実際にプロジェクトに使用しましたが、追加するのは非常に簡単でした. 10 分もかかりませんでした. ただし、「ダウンロード」セクションに特に注意してください。マウスホイールのスクロールなどを正しく機能させるには、他のいくつかのスクリプトに依存しています。

于 2013-05-20T03:07:41.953 に答える