ホームページ > 記事 > ウェブフロントエンド > JavaScriptでスクロールバーの高さを設定する方法
JavaScript でスクロール バーの高さを設定する方法: まず、現在選択されている li の前のノードの高さを取得し、次に ul の高さの半分を減算して、それを ul のscrollTop に設定します。スクロールバーを中央の位置に設定します。
この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript はスクロール バーの高さを動的に設定します
作業中に発生する状況は次のとおりです。ul タグには多くの li タグが含まれており、そのうちの 1 つは選択された 90056d18e7cacc7b2e5f4f232ee8325625edfb22a4f469ecb59f1190150159c6。
以下の ul スタイルのように ul に高さが設定されており、多くの li サブタグがある場合、選択した li はスクロール バーの下に隠れます。
<ul id="ul_module" style="height:180px; overflow-y:scroll;"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>000</li> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> <li>666</li> <li>777</li> <li>888</li> <li class="li-on">999</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul>
選択した li タグを表示領域に移動する必要があります。js を使用してスクロール バーの高さを動的に設定できます。
詳細は以下の通りです:現在選択されているliの前のノードの高さを取得し、ulの高さの半分を引いてulのscrollTopに設定します。バーを真ん中の位置に置きます。
var ul_module = $('#ul_module'); var ul_height = ul_module.height(); var seleted_li = ul_module.find('.li-on'); if(seleted_li.length) { var height = seleted_li.height(); var prevCount = seleted_li.prevAll().length; ul_module.scrollTop(height * prevCount - ul_height/2); }
【推奨学習: JavaScript 上級チュートリアル #]
以上がJavaScriptでスクロールバーの高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。