JS滾動事件

滾動事件

目標：讓列表中的某一行滾動到可視區域

元素在容器頂部上邊，$item.position().top為負；元素在容器頂部下邊，$item.position().top為正。

元素$item相對於子元素頂部的距離為：$item.position().top + $parent.scrollTop()。

因此，讓$item出現在可視區域，$tbody.scrollTop($item.position().top + $parent.scrollTop() - 30);

1. 設置scrollTop來滾動

   固定高度的容器$parent，超出容器高度的子元素，$parent.scrollTop()

   var tbody = $(".colfix-tbody")
   
   tbody.scrollTop() // 讀取
   tbody.scrollTop(0) // 設置
   tbody.scrollTop(100)
   

2. 獲取子元素相對父元素的位置，並滾到可視區域

   function(e, id) {
   	e.preventDefault();
   	var $tbody = $("tbody"); // 固定高度的父元素
   	// $selectedTr: 選中的某一行
   	var top = $selectedTr.position().top; // 元素當前的位置距離容器頂部的位置
   	var tmpScrollTop = $tbody.scrollTop(); // 容器此時被卷起的高度
   	$tbody.scrollTop(tmpScrollTop + top - 30); // 讓元素出現在容器頂部下面30px處
   	$selectedTr.css({ backgroundColor: "red" });
   },