含有滚动条元素的getBoundingClientRect等属性的值

问题1：首先我们给出iScroll的一个官方的demo,你可以把这个demo拷贝到本地然后运行，或者去github下载

iScroll


	

		

			
Pretty row 1
			
Pretty row 2
			
Pretty row 3
			
Pretty row 4
			
Pretty row 5
			
Pretty row 6
			
Pretty row 7
			
Pretty row 8
			
Pretty row 9
			
Pretty row 10
			
Pretty row 11
			
Pretty row 12
			
Pretty row 13
			
Pretty row 14
			
Pretty row 15
			
Pretty row 16
			
Pretty row 17
			
Pretty row 18
			
Pretty row 19
			
Pretty row 20
			
Pretty row 21
			
Pretty row 22
			
Pretty row 23
			
Pretty row 24
			
Pretty row 25
			
Pretty row 26
			
Pretty row 27
			
Pretty row 28
			
Pretty row 29
			
Pretty row 30
			
Pretty row 31
			
Pretty row 32
			
Pretty row 33
			
Pretty row 34
			
Pretty row 35
			
Pretty row 36
			
Pretty row 37
			
Pretty row 38
			
Pretty row 39
			
Pretty row 40
			
Pretty row 41
			
Pretty row 42
			
Pretty row 43
			
Pretty row 44
			
Pretty row 45
			
Pretty row 46
			
Pretty row 47
			
Pretty row 48
			
Pretty row 49
			
Pretty row 50
		
	

问题2：计算getBoundingClientRect的值？

如果你随意滚动一下iScroll，然后运行下面的代码：

document.getElementById('wrapper').getBoundingClientRect()
document.getElementById('scroller').getBoundingClientRect()

注意：这时候你就会发现wrapper的值就是到文档顶部距离的高度；而scroller的值=iScroll滚动的距离(向上为负数)+wrapper到文档的距离。其中iScroll滚动的距离可以在控制台中看到。就是下面的scroller元素的transform的translate的值：

问题3：iScroll中的offsetTop/offsetLeft如何变化？

首先我们看看iScroll的配置项：

myScroll = new IScroll('#wrapper', {
		scrollbars: true,
		mouseWheel: true,
		interactiveScrollbars: true,
		shrinkScrollbars: 'scale',
		 fadeScrollbars: false,
		 momentum:true,
		 shrinkScrollbars:'clip',
		 useTransform:true,//默认为true
		 keyBindings:true
	});

注意：因为iScroll默认使用了transform:translate这种方式，所以其不会修改scroller元素和wrapper元素间距，所以scroller元素的offsetLeft/offsetTop的值都是0。

document.getElementById('scroller').offsetTop
document.getElementById('scroller').offsetTop

但是，如果你把上面的useTransform设置为false，你就会发现这时候就是通过修改top/left值来导致滚动的。scroller元素的offsetTop/offsetLeft都会有值。

总结：如果使用了translate来产生滚动，这时候的offsetTop/offsetLeft等都是不会发生变化的。