js实现滚动条滚动到某个位置便自动定位某个tr


Posted in Javascript onJanuary 20, 2021

要实现带滚动条的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> 
 <div 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> 
 </div> 
 <input type="button" value="定位到一行" onclick="test()"/> 
 </body>

效果图:

js实现滚动条滚动到某个位置便自动定位某个tr

虽说是几行代码,但要彻底弄懂。要熟悉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 是一个元素的引用,当前元素的偏移量在其中计算。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
Axios取消重复请求的方法实例详解
Jun 15 Javascript
html5调用摄像头截图功能
Jan 18 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 #Javascript
javascript实现tab响应式切换特效
Jan 29 #Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 #Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 #Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 #Javascript
Angular实现form自动布局
Jan 28 #Javascript
理解javascript中的MVC模式
Jan 28 #Javascript
You might like
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
基于jquery的表格排序
2010/09/11 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python实现验证码识别
2020/06/15 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
Python实现异步IO的示例
2020/11/05 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
法律进社区活动总结
2015/05/07 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android