Thin的DateChooser代码学习(getScrollPosition)（原创，转载请声明）

THIN_CS.prototype.getScrollPosition = function(e) { var b=e.document.body; if(e==b)return {left:0,top:0}; with(e.getBoundingClientRect()) { return {left:b.scrollLeft+left,top:b.scrollTop+top}; } }

getBoundingClientRect在msdn的解释

Retrieves an object that specifies the bounds of a collection of TextRectangle objects. （返回一个对象包括所有TextRectangle的数组元素）

TextRectangle在msdn的解释

Specifies a rectangle that contains a line of text in either an element or a TextRange object.

来比较看一下getClientRects

Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line.

返回一个矩形框的数组，每一个数组表示单独一行，这里好像不是很准确，我们来看一段代码

<body>

<P >Four score and seven years ago

<B ID=oDiv ><img src="csdn.gif"> our fathers<BR>
brought forth . . . a new nation, conceived in liberty<BR>
and dedicated to the proposition that all men are<BR>
created equal.</B> Now we are engaged in a great civil war . . .
</P>

</body>
<script>
var s=document.getElementById("oDiv").getClientRects();
alert(s.length);
var b="";
for(var i=0;i<5;i++)
b+=s[i].left+",";
alert(b);

</script>

这段代码对B tag应用getClientRects()得到的TextRectangle Collection是5，而按照msdn中"single line"的理解应该是4

不过在thin的getScrollPosition函数中，我们并没有用到getClientRects()

对于getBoundingClientRect(),会返回一个object。

另外getBoundingClientRect()在msdn的remark

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft® Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

也就是说返回的坐标是相对于2,2(pixels)也就是document.body的clientTop和clientLeft。

因此计算ScrollPosition我们要算上scrollLeft和scrollTop的值（这个对于计算两个object之间的距离时，必须用到），对于scrollLeft不明白可以查阅相关资料。

附上msdn中的位置表示的图片，对于理解element dimension 和 location十分有帮助

Technorati : DateChooser getBoundingClientRect getClientRects

Thin的DateChooser代码学习(getScrollPosition)（原创，转载请声明）相关推荐

github 开源代码学习集合（转载）
一个支持多种item类型的recycleView依赖注入库 1.通过注解的方式方便的把ViewHolder注入到recycleView中. 2.去除findViewByID等冗余操作. 3.去除编写a ...
c++builder实现文件拖拽与U盘复制---YYB原创(转载请注明出处)
在这里我们使用到了一个API函数:DragQueryFile,它的原型如下: UINT DragQueryFile( HDROP hDrop, UINT iFile, LPTSTR ...
使用IDEA打包war包，并部署到Tomcat中（原创转载请附上博文链接）
前提先完成https://blog.csdn.net/qq_23878541/article/details/90147223的5.1步骤. 因为5.1步骤是生成临时war目录,我们需要用此目录生成 ...
PX4代码学习系列博客(6)——offboard模式位置控制代码分析（之前转载过，这是第二次转载了）
我刚刚发现这篇文章去年八月份的时候转载过一次了 https://blog.csdn.net/sinat_16643223/article/details/107874349 转载自:https://b ...
翻译-高质量JavaScript代码书写基本要点(转载)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1173 原文作者:S ...
pytorch cycleGAN代码学习1
一. 新的东西 p.s :很多架构都和之前一样,就举些不同的 1. ReplayBuffer() # Buffers of previously generated samples fake_A_ ...
YOLO 卷积层代码学习
YOLO 卷积层代码学习卷积层的初始化 void im2col_cpu(float* data_im,int channels, int height, int width,int ksize, i ...
（下）python3 selenium3 从框架实现代码学习selenium让你事半功倍
上一篇博文简要在上一篇博文中已得知:使用 execute 向远程服务器发送请求会通过 webdriver 与浏览器交互,且发送已定义的命令常量可获得一些相关信息. 其中 execute 方法实现已经 ...
unity学习路线参考——转载自csdn
版权声明: https://blog.csdn.net/qq_22521529/article/details/83108837 Unity3D学习路线与学习经验分享作者:15游02 丁祺你好,这 ...

Thin的DateChooser代码学习(getScrollPosition)（原创，转载请声明）

Thin的DateChooser代码学习(getScrollPosition)（原创，转载请声明）相关推荐

最新文章

热门文章