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