注册网站流程和费用,深汕特别合作区在哪里,襄樊网站开发,装修案例文案clientHeight#xff0c;scrollHeight#xff0c;offsetHeight clientHeight: 可理解为内部可视区高度#xff0c;样式的height上下padding scrollHeight: 内容的实际高度上下padding#xff08;如果没有限制div的height#xff0c;即height是自适应的#xff0c;一般是…clientHeightscrollHeightoffsetHeight clientHeight: 可理解为内部可视区高度样式的height上下padding scrollHeight: 内容的实际高度上下padding如果没有限制div的height即height是自适应的一般是scrollHeightclientHeight offsetHeight:可理解为div的可视高度样式的height上下padding上下border-width。 clientTopscrollTopoffsetTop clientTop: 容器内部相对于容器本身的top偏移实际就是 上border-width div1是10pxdiv2是20px scrollTop: Y轴的滚动条没有或滚到最上时是0y轴的滚动条滚到最下时是 scrollHeight-clientHeight很好理解 offsetTop: 容器到其包含块顶部的距离粗略的说法可以理解为其父元素。 offsetTop top margin-top border-top 滚动时通常我们只能scrollTop当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离否则就是滚动过头了手机上的上下拉取
代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle* {margin: 0;padding: 0;}div {margin: 20px;border: 10px solid gray;padding: 10px;}#wrapper {position: relative;}#div1,#div2 {height: 200px;width: 200px;}#tip1,#tip2 {position: absolute;margin: 0;right: 100px;height: 150px;}#tip1 {top: 50px;}#tip2 {top: 300px;}#div1 {overflow: scroll;}/style
/headbodydiv idwrapperdiv iddiv1p styleheight:300px;border: 2px solid red/pdiv idtip1pdiv1/ppclientHeightspan idclientHeight1/span/ppscrollHeightspan idscrollHeight1/span/ppoffsetHeightspan idoffsetHeight1/span/ppclientTopspan idclientTop1/span/ppscrollTopspan idscrollTop1/span/ppoffsetTopspan idoffsetTop1/span/p/div/divdiv iddiv2 styleborder:20px soliddiv idtip2pdiv2/ppclientHeightspan idclientHeight2/span/ppscrollHeightspan idscrollHeight2/span/ppoffsetHeightspan idoffsetHeight2/span/ppclientTopspan idclientTop2/span/ppscrollTopspan idscrollTop2/span/ppoffsetTopspan idoffsetTop2/span/p/div/div/div/body
scriptclientHeight1.innerHTML div1.clientHeightscrollHeight1.innerHTML div1.scrollHeightoffsetHeight1.innerHTML div1.offsetHeightclientTop1.innerHTML div1.clientTopscrollTop1.innerHTML div1.scrollTopoffsetTop1.innerHTML div1.offsetTopclientHeight2.innerHTML div2.clientHeightscrollHeight2.innerHTML div2.scrollHeightoffsetHeight2.innerHTML div2.offsetHeightclientTop2.innerHTML div2.clientTopscrollTop2.innerHTML div2.scrollTopoffsetTop2.innerHTML div2.offsetTop/script/html
