How to set scroll bar height in javascript-JS Tutorial-php.cn

How to set scroll bar height in javascript

藏色散人

Release： 2023-01-05 16:09:36

Original

5459 people have browsed it

How to set the height of the scroll bar in javascript: first get the height of the node in front of the currently selected li; then subtract half of the height of ul and set it to the scrollTop of ul, and set the scroll bar in the middle position.

How to set scroll bar height in javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

JavaScript dynamically sets the scroll bar height

The situation encountered at work is as follows: a ul tag, which contains many li tags, one of which represents the initialization of the selected

If ul has a height set, such as the ul style below, and there are many li sub-tags, the selected li will be submerged under the scroll bar.

<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>

Copy after login

What you need to do is to move the selected li tag into the visible area, and you can dynamically set the height of the scroll bar through js.

The details are as follows: get the height of the node in front of the currently selected li, then subtract half of the height of ul and set it to the scrollTop of ul. Basically, you can set the scroll bar in the middle position.

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);
}

Copy after login

【Recommended learning: javascript advanced tutorial】

The above is the detailed content of How to set scroll bar height in javascript. For more information, please follow other related articles on the PHP Chinese website!