【【日常总结】scrollTop、scrollHeight与clientHeight的重要关系】的更多相关文章

【日常总结】scrollTop、scrollHeight与clientHeight的重要关系

前言 在做一个需求的时候涉及懒加载,百度了一下,发现scrollTop.scrollHeight与clientHeight这三个元素起到了重要作用,以前做过类似demo但是时间过太久忘记了,现在已经完全分不清这个三个属性的区别,现在再重新复习一下 一.scrollTop 定义:获取或设置元素的内容向上滚动的像素值 特点:1.未设置时默认为0   2.为负值时不做任何响应 3.设置为超出本身最大值时,默认为最大值 二.clientHeight 定义:clientHeight = CSS heigh…

scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明

一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight offsetWidth 三.可视距离.宽高 clientTop clientLeft clientHeight clientWidth 四.坐标 event.clientX event.clientY event.pageX event.pageY event.offsetX event.offse…

各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

1..position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移,返回.position().left和.position().top,不算上自己的margin-left: jquery的.offset()获取相对于视口左上角的偏移,返回.offset().left和.offset().top, 算上自己的margin-left,,还可以设置.offset({left:,top:});这个很有用…

scrollTop、scrollHeight与clientHeight

MDN上概念 scrollTop:获取或设置一个元素的内容垂直滚动的像素数. scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. clientHeight:元素内部的高度(单位像素),包含内边距,但不包括水平滚动条.边框和外边距. 只看概念,似懂非懂,还是要自己测试一遍才知道,做个记录,以下为谷歌浏览器测试. css .box { height: 500px; width: 300px; overflow: scroll; color: #fff; } htm…

offsetTop/offsetHeight scrollTop/scrollHeight 的区别

offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offsetTop   obj距离上方或上层控件的位置,整型,单位像素. obj.offsetHeight   obj自身的高度,整型,单位像素. offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是: 一.offsetTop 返回的是数字,而 st…

scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解

开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理如下,方便日后查阅: DOM元素对象 clientHeight 返回当前元素在页面上的可视高度(包括padding:不包括border.margin.滚动条高度) 单位px clientWidth 返回当前元素在页面上的可视宽度(包括padding:不包括border.margin.滚动条宽度) 单…

JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容 * -- 兼容方案:clintY+页面滚动出去垂直距离 * */ /** * console.dir(element) * 元素element * offsetLeft/offsetTop 获取基于offsetParent<--当前元素的定位父…

scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁

题中的那么多属性让人头都大了,他们到底是什么意思?不同浏览器的实现是一样的吗?以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2,操作系统ubuntu16.04的测试,关于IE及其它浏览器并没有考虑. 一.谈谈XXWidth 1.width 这个是style对象的一个属性,跟你在css样式里写的那个width的值是一样的,注意他是带单位的. <!DOCTYPE html> <html lang="en">…

scrollLeft/scrollTop/scrollHeight

scrollHeight  :  It includes the element's padding, but not its border or margin.This property will round the value to an integer. If you need a fractional value, use Element.getBoundingClientRect(). scrollLeft: http://runjs.cn/code/szgoses4 scrollBo…

offsetHeight、scrollHeight、clientHeight、height

对这几项进行彻底研究. 第一步:纯净div,没有margin,padding,border,height设置为200px. 添加滚动条,overflow:scroll,结果div的高度被压缩,因为被滚动条占用17px(滚动条的高度为17px). 加入滚动条前: scrollHeight=200px offsetHeight=200px 加入滚动条后: scrollHeight=183px=(内容高度200px-滚动条17px)  (说明scrollHeight已经不包括滚动条的高度) offse…