首頁 > web前端 > js教程 > javascript怎麼設定滾動條高度

javascript怎麼設定滾動條高度

藏色散人
發布: 2023-01-05 16:09:36
原創
5496 人瀏覽過

javascript設定滾動條高度的方法:首先取得目前選取的li前面的節點的高度;然後減去ul高度的一半設定給ul的scrollTop,把捲軸設定在中間位置即可。

javascript怎麼設定滾動條高度

本文操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript動態設定捲軸高度

工作中遇到情形如下:一個ul標籤,裡面有許多li標籤,其中有一個代表初始化已選取的

  • 如果ul設定了高度,如下面的ul的style,並且有很多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中文網其他相關文章!

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板