JavaScriptでスクロールバーの高さを設定する方法-jsチュートリアル-php.cn

JavaScriptでスクロールバーの高さを設定する方法

藏色散人

リリース： 2023-01-05 16:09:36

オリジナル

5492 人が閲覧しました

JavaScript でスクロールバーの高さを設定する方法: まず、現在選択されている li の前のノードの高さを取得し、次に ul の高さの半分を減算して、それを ul のscrollTop に設定します。スクロールバーを中央の位置に設定します。

JavaScriptでスクロールバーの高さを設定する方法

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript はスクロールバーの高さを動的に設定します

作業中に発生する状況は次のとおりです。ul タグには多くの li タグが含まれており、そのうちの 1 つは選択された

。

以下の 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 = $(&#39;#ul_module&#39;);
var ul_height = ul_module.height();
var seleted_li = ul_module.find(&#39;.li-on&#39;);
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 サイトの他の関連記事を参照してください。