原 JavaScript動態設定滾動條高度

2021-09-08 16:19:34 字數 1527 閱讀 8005

工作中遇到情形如下:乙個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 = $('#ul_module');

var ul_height =ul_module.height();

var seleted_li = ul_module.find('.li-on');

if(seleted_li.length)

JavaScript實現集合(ES5動態原型模式)

集合的概念 集合是由一組無序且唯一 即不能重複 的項組成的。這個資料結構使用了與有限集合相同的數學概念,但應用在電腦科學的資料結構中。你也可以把集合想象成乙個既沒有重複元素,也沒有順序概念的陣列。集合的結構 function set if typeof this add function set.p...

JavaScript動態載入

在做專案的過程中需要用到動態載入,如何做,剛開始很為難。什麼是動態載入呢?比如說,新增便簽時,在往庫里插入資料的同時需要顯示在介面上,新增資料後重新整理頁面是可以獲得,但是沒插入一條資料都要重新整理介面的話,不僅麻煩,還很慢。所以就需要用到動態載入。經過不懈努力,其實,也就是動態拼接字串而已。再新增...

Javascript設定選中

全選的所有指定名稱的checkbox state 全選的checkbox的狀態 name 中的所有checkbox的名稱 author fangtf type void function selectall state,name 全選的所有指定id名稱的同名checkbox state 全選的che...