JavaScript Table行定位效果(7)
作者:cloudgamer 来源:cloudgamer博客 发布时间:2009-05-25 10:47:00
【元素定位】
万事俱备,只欠定位了。
由于要根据窗口滚动状态来判断计算定位,scrollTop/scrollLeft的获取必不可少。
但在chrome中就算用了DOCTYPE,也要用document.body来获取scrollTop/scrollLeft,尽管它确实有document.documentElement。
对chrome了解不多,也不知哪里能查它的相关文档,程序里就直接做个判断算了:
this._doc = isChrome ? document.body : document.documentElement;
定位的第一步就是判断是否需要定位,这里的判断标准有两个,第一个是原tr是否超过了视窗范围,还有是新table要显示的位置是否在原table的显示范围内。
第一点可以通过原tr位置的顶部和底部是否超过视窗的顶部和底部来判断:
var top = this._doc.scrollTop, left = this._doc.scrollLeft
,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight;
if(outViewTop || outViewBottom){...}
在看第二点之前先看看程序中的Auto属性,它是用来指定否自动定位的。
如果自动定位的话当原tr离开视框顶部新table就会定位到视框顶部,原tr离开底部新table就会定位到视框底部,这样看上去会比较自然顺畅。
如果不选择自动的话就会根据SetPos方法中计算得到的新table视窗top值来设置定位:
var viewTop = !this.Auto ? this._nTableViewTop
: (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//视窗top
,posTop = viewTop + top;//位置top
接着就判断新table要显示的位置是否在原table的显示范围内,这个可以通过新table位置的顶部和底部是否超过原table的顶部和底部来判断:
if(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){...}
当符合所有的条件就可以进行定位了,如果是fixed定位的就使用相对视窗的top值:
this._style.top = viewTop + "px";
this._style.left = this._oTableLeft - left + "px";
像ie6是absolute定位的就要使用相对文档的top值:
this._style.top = posTop + "px";
this._style.left = this._oTableLeft + "px";
考虑到左右滚动的情况,left也必须设置。
当然不符合条件就会隐藏新table,程序中给top设置一个很大的负值来间接“隐藏”它。
用负值是因为这样不会把ie6的页面拉长,不用display是因为上面需要获取它的offsetHeight,如果用display隐藏就获取不了啦。
最后把Run程序绑定到window的scroll事件中就可以了,而window在resize时视框高度会发生变化,所以resize事件要绑定SetPos程序。


猜你喜欢
- 日常运维工作中,通常是邮件报警机制,但邮件可能不被及时查看,导致问题出现得不到及时有效处理。所以想到用Python实现发短信功能,当监控到问
- 今天我们来学习一下 异常语法 中的另一个成员 —> finally ; 通过学习 finally ,可以帮助我们更
- 本章我们要制作一个俄罗斯方块游戏。Tetris译注:称呼:方块是由四个小方格组成的俄罗斯方块游戏是世界上最流行的游戏之一。是由一名叫Alex
- 在升级批处理sql脚本的时候,由于各种编写的不规范、不可重复执行,我们通常希望在sql脚本出错后不中止,而是执行完成。虽然这些问题可通过编写
- DELETE 语句DELETE 语句用于删除记录,语法如下:(与 “UPDATE” 语法较为相似)D
- 环境搭建下载安 * eego,bee1.开启gomod设置代理go env -w GO111MODULE=ongo env -w GOPROX
- 装完sql server 2005后却没有找到ms的示例数据库northwind 后来查看安装光盘发现sql server 2005种只有a
- 导语因为疫情无奈只能在家宅了好多天,随手玩了下自己以前做的一些小游戏,说真的,有几个游戏做的是真的劣质,譬如 flappybird 真的让我
- 由于工作需要本文主结合了excel表格,对表格中的ssh密码进行批量修改以下是详细代码(python3):'''遇到
- 问题问题1:如何解决事务提交时flush redo log带来的性能损失WAL是实现事务持久性(D)的一个常用技术,基本原理是将事务的修改记
- 前言提示:在管理服务器的过程中,发现有很多服务器在启动的过程中默认以PXE方式启动,这就导致我们无法将PXE装机程序放开到所有的交换机端口中
- 版本链在InnoDB引擎表中,他们的聚簇索引记录中有两个隐藏列:trx_id:用来存储对数据进行修改时的事务idroll_pointer:每
- PyTorch与PyTorch Geometric的安装GPU与CUDA,Python,PyTorch的匹配1. 查看Linux系统中GPU
- 数值运算代码:# -*- coding=GBK -*-import cv2 as cv# 数值运算:加减乘除def shu_image(sr
- 你们要的3D太阳系图片上传之后不知为何帧率降低了许多。。。日地月三体所谓三体,就是三个物体在重力作用下的运动。由于三点共面,所以三个质点仅在
- 简介滚动条小部件用于向下滚顶其他小部件的内容,如列表框,文本和画布,但是,我们也可以为Entry小部件创建水平滚动条,常常被用于实现文本,画
- items()方法返回字典的(键,值)元组对的列表语法以下是items()方法的语法:dict.items()参数 &
- 我就废话不多说了,大家还是直接看代码吧!print("thresh =",thresh)coords = np.colu
- 两个进程发生死锁的典型例子是:进程T1中获取锁A,申请锁B;进程T2中获取锁B,申请锁A,我们下面动手来演示一下这种情况:1. 创建一个Da
- cv的xdm可以直接翻到 需求 和 代码 用,想看中间的分析就老实往下看吧little 背景最近在做毕设,需要将几百篇整体结构差不多的文章中