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

来源：互联网发布：java流媒体直播开发编辑：程序博客网时间：2024/04/29 15:53

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

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><title>iScroll demo: scrollbars</title><script type="text/javascript" src="../../build/iscroll.js"></script><script type="text/javascript">var myScroll;function loaded () {myScroll = new IScroll('#wrapper', {scrollbars: true,mouseWheel: true,interactiveScrollbars: true,shrinkScrollbars: 'scale', fadeScrollbars: false, momentum:true, shrinkScrollbars:'clip', keyBindings:true});}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);</script><style type="text/css">* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}html {-ms-touch-action: none;}body,ul,li {padding: 0;margin: 0;border: 0;}body {font-size: 12px;font-family: ubuntu, helvetica, arial;overflow: hidden; /* this is important to prevent the whole page to bounce */}.iScrollIndicator{background-color:red!important;}.iScrollVerticalScrollbar{background-color:blue!important;}#header {position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 45px;line-height: 45px;background: #CD235C;padding: 0;color: #eee;font-size: 20px;text-align: center;font-weight: bold;}#footer {position: absolute;z-index: 2;bottom: 0;left: 0;width: 100%;height: 48px;background: #444;padding: 0;border-top: 1px solid #444;}#wrapper {position: absolute;z-index: 1;top: 145px;border:1px solid red;bottom: 48px;width: 500px;background: #ccc;overflow: hidden;left:400px;height:600px;}#scroller {position: absolute;z-index: 1;-webkit-tap-highlight-color: rgba(0,0,0,0);width: 100%;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none;}#scroller ul {list-style: none;padding: 0;margin: 0;width: 100%;text-align: left;}#scroller li {padding: 0 10px;height: 40px;line-height: 40px;border-bottom: 1px solid #ccc;border-top: 1px solid #fff;background-color: #fafafa;font-size: 14px;}</style></head><body onload="loaded()"><div id="header">iScroll</div><div id="wrapper"><div id="scroller"><ul><li>Pretty row 1</li><li>Pretty row 2</li><li>Pretty row 3</li><li>Pretty row 4</li><li>Pretty row 5</li><li>Pretty row 6</li><li>Pretty row 7</li><li>Pretty row 8</li><li>Pretty row 9</li><li>Pretty row 10</li><li>Pretty row 11</li><li>Pretty row 12</li><li>Pretty row 13</li><li>Pretty row 14</li><li>Pretty row 15</li><li>Pretty row 16</li><li>Pretty row 17</li><li>Pretty row 18</li><li>Pretty row 19</li><li>Pretty row 20</li><li>Pretty row 21</li><li>Pretty row 22</li><li>Pretty row 23</li><li>Pretty row 24</li><li>Pretty row 25</li><li>Pretty row 26</li><li>Pretty row 27</li><li>Pretty row 28</li><li>Pretty row 29</li><li>Pretty row 30</li><li>Pretty row 31</li><li>Pretty row 32</li><li>Pretty row 33</li><li>Pretty row 34</li><li>Pretty row 35</li><li>Pretty row 36</li><li>Pretty row 37</li><li>Pretty row 38</li><li>Pretty row 39</li><li>Pretty row 40</li><li>Pretty row 41</li><li>Pretty row 42</li><li>Pretty row 43</li><li>Pretty row 44</li><li>Pretty row 45</li><li>Pretty row 46</li><li>Pretty row 47</li><li>Pretty row 48</li><li>Pretty row 49</li><li>Pretty row 50</li></ul></div></div><div id="footer" style="background-color:yellow"></div></body></html>

问题2：计算getBoundingClientRect的值？

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

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

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

<div id="scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, -603px) translateZ(0px);"></div>

问题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').offsetTopdocument.getElementById('scroller').offsetTop

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

<div id="scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; left: 0px; top: -340px;"></div>

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

0 0