js中offset、client、scroll的区别
偏移量:offset dimension
offsetHeight: 元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。
offsetWidth: 元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。
客户区大小:client dimension
clientWidth:元素内容区宽度加上左右内边距宽度。
clientHeight:元素内容区高度加上上下内边距高度。
滚动大小:(scroll dimension),指的是包含滚动内容的元素的大小。
scrollHeight:在没有滚动条的情况下,元素内容的总高度。
scrollWidth:在没有滚动条的情况下,元素内容的总宽度。
scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
在确定文档的总高度时(包括基于视口的最小高度时),必须取得scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。下面就是这样一个例子。
var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
注意,对于运行在混杂模式下的IE,则需要用document.body 代替document.document-Element。
通过scrollLeft 和scrollTop 属性既可以确定元素当前滚动的状态,也可以设置元素的滚动位置。在元素尚未被滚动时,这两个属性的值都等于0。如果元素被垂直滚动了,那么scrollTop 的值会大于0,且表示元素上方不可见内容的像素高度。如果元素被水平滚动了,那么scrollLeft 的值会大于0,且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的,因此将元素的scrollLeft 和scrollTop 设置为0,就可以重置元素的滚动位置。下面这个函数会检测元素是否位于顶部,如果不是就将其回滚到顶部
function scrollToTop(element){ if (element.scrollTop != 0){ element.scrollTop = 0; } }
这个函数既取得了scrollTop 的值,也设置了它的值。
- JS属性 ClientTop,scrollTop,offsetWidth,ClientWidth,clientLeft,padding,border,top,margin区别
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
- js中top、clientTop、scrollTop、offsetTop的区别
- js中scrolltop,offsettop,clienttop 区别
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- js中offset、client、scroll的区别
- JS中的offset、scroll、client的区别及它们的相关兼容问题
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版【转】
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
- js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
- js中offsetTop,scrollTop,clientTop区别
- JS中关于clientWidth offsetWidth scrollWidth 等的区别
- js的element中,属性以scroll、client和offset为前缀的属性的区别
- JS中常用坐标offset、scroll、client的区别
- JS中常用坐标offset、scroll、client的区别
- 【JavaScript】offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- JS中常用坐标offset、scroll、client的区别(转载)
- JS中常用坐标offset、scroll、client的区别