js實作捲軸滾動到某個位置便自動定位某個tr_javascript技巧
- 不言原創
- 2018-05-28 14:15:404935瀏覽
要實作有捲軸的table，定位到某個tr，其實是很簡單的，只有幾行js程式碼就可以完成，具體內容如下
js程式碼
<strong><script type="text/javascript">
function test(){
var $objTr = $("#location"); //找到要定位的地方 tr
$objTr.css("background-color","lightgray"); //设置要定位地方的css
var objTr = $objTr[0]; //转化为dom对象
$("#dataDiv").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr
}
</script></strong>html
<body>
<h1>定位</h1>
<p id="dataDiv" style="overflow-x:hidden;overflow-y:auto;height:400px;width:450px;">
<table id="tableId" style="width:400px;background-color:yellow" align="center" border="0">
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr <span style="color:#FF0000;">id="location"</span>><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
<tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr>
</table>
</p>
<input type="button" value="定位到一行" onclick="test()"/>
</body>
雖說是幾行程式碼，但要徹底弄清楚。要熟悉animate的使用，scrollTop，.offsetTop的意思方可得心應手。
1. animate的使用說明：
animate() 方法執行 CSS 屬性集的自訂動畫。
此方法透過CSS樣式將元素從一個狀態改變為另一個狀態。 CSS屬性值是逐漸改變的，這樣就可以創造出動畫效果。 只有數字值可建立動畫（例如 "margin:30px"）。字串值無法建立動畫（例如 "background-color:red"）。
2. scrollTop
scrollTop屬性
有些情況下,「元素中內容」的高度會超過「元素本身」的高度, scrollTop指的是「元素中的內容」超出「元素上邊界」的那部分的高度。
解釋： 內層元素的高度值300px > 外層元素的高度值200px,因此「外層元素的內容」(也就是「內層元素」)無法完全顯示，而外層元素把overflow設定為auto，因此外層元素的右側會出現垂直滑動條 初始狀態下，“內層元素的上邊界”和“外層元素的上邊界”重合，沒有任何內容超過“外層元素的上邊界”，此時scrollTop屬性的值為0。
當向下拖曳滾動區塊時，超過「外層元素的上邊界」的內容會逐漸增多，scrollTop值就等於這些超出部分的高度。 當拖曳滾動塊到最底部時，「內層元素的下邊界」和「外層元素的下邊界」重合，此時,超過「外層元素的上邊界」的內容的高度=300px-200px= 100px，也就是此時的scrollTop值。
3..offsetTop，offsetLeft等
假設 obj 為某個 HTML 控制項。
obj.offsetTop 指 obj 距離上方或上層控制的位置，整數，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控制的位置，整數，單位像素。
obj.offsetWidth 指 obj 控製本身的寬度，整數，單位像素。
obj.offsetHeight 指 obj 控製本身的高度，整數，單位像素。
offsetParent
offsetParent屬性傳回一個物件的引用，這個物件是距離呼叫offsetParent的元素最近的（在包含層次中最靠近的），並且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位,則offsetParent屬性的取值為根元素(在標準相容模式下為html元素；在怪異呈現模式下為body元素)的參考。當容器元素的style.display 被設定為 "none"時（譯註：IE和Opera除外），offsetParent屬性 傳回null。
句法：parentObj = element.offsetParent
變數：parentObj 是一個元素的引用，當前元素的偏移量在其中計算。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn