> 웹 프론트엔드 > JS 튜토리얼 > js_Basic 지식 중 scrollHeight, scrollWidth, scrollLeft, scrolltop 등의 차이점 소개

js_Basic 지식 중 scrollHeight, scrollWidth, scrollLeft, scrolltop 등의 차이점 소개

WBOY
풀어 주다: 2016-05-16 17:53:34
원래의
1342명이 탐색했습니다.
复代码码 代码如下:



<머리>

js位子表示





모든 것은 mousedown, mousemove, mouseup等打造的拖动,仅仅在普的键盘鼠标的电脑设备上可以工業。而到了ios设备上 (iphone itouch ipad),则不能工作了。最近因为做个东西,需要支持ios设备,所以只好看了下webkit浏览器的触摸事件。
分别是touchstart、touchmove、touchend。为了写个demo,꽃了不少的时间,所以为了节省时间,我文章里就不多说了,仅贴一下相关代码。





ie(ie9,chrome,ff基本一致)中:
offsetHeight(返回元素的高島宽德,以image素为单位,包含内边距):
200 4 4 3 3=214(自身200의 높이 上下各为4의 内边距 上下의 各为3의 테두리, 유의하지 않음)
offsetWidth(返回元素의 높이와 크기, 以image素为单位,包含内边距):、
100 3 3 4 4=114 同上
offsetLeft(返回当前元素的左边界到它的包含元素的左边界의 偏移량, 以image素为单位):
2 3 1=6(ie6下为3)(父级div的内左边距2 父级div外左边距 3 子div左외부边距 1,注这里子div内边距是不会影响到offsetLeft)
没有offsetRight的概念。
offsetTop(返回当前元素的上边界到它的包含元素的上边界的偏移weight,以image素为单位。)
2 3 1=6(ie6下为2)도리와 오프셋Left一样
scrollHeight(返回元素的完整적높이와 크기, 以image素为单位。当一个元素拥有滚动条时(比如由于CSS의 오버플로:스크롤성, 숨김, 得到적只是能显示文字所能看到적고도)
474(div적 수준의 높이, 由里side文字来决定,overflow:scroll )
如果오버플로:hidden,就只有390,其它的被隐藏了
如果去调overflow,就是390,为什么overflow:scroll 却等于474呢?因为还包含了滚动높은 높이
scrollWidth:(와스크롤 높이도리일체)
overflow:hidden值为108(子div实际的宽degree)
overflow:scroll 值为90(这里为什么会这样?难道不包括滚动条的宽德?)
去掉overflow,值为108
스크롤탑(返回已经滚动到元素的左边界或上边界的image素数。只只有限素有滚动条的时候, 예를 들어, 위안적인 CSS 오버플로 属性设置为 auto 的时候,这些image素才有义,并些属性也只也只 或 动文档的位置。注意,这些属性并不会指定一个