[原]JavaScript動態設定捲軸高度

工作中遇到情形如下：一個ul標籤，裡面有很多li標籤，其中有一個代表初始化已選中的<li class="li-on"><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 = $('#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);}