DOM盒模型和位置 client offset scroll 和滚动的关系
概览
在dom里面有几个描述盒子位置信息的值,
- pading border margin
- width height
- client
- clientWidth 不要border
- clientHeight 不要border
- offset
- offsetTop
- offsetLeft
- offsetWidth 要border
- offsetHeight 要border
- scroll
- scrollTop
- scrollHeight
- scrollLeft
- scrollWidth
盒模型
生产环境一般使用 box-sizing: border-box,
效果:
width == content.width + pading + border
height == content.height + pading + border
.antd-pro-pages-test-dom-index-box { box-sizing: border-box; width: 100px; height: 100px; padding: 5px; border-color: grey; border-style: solid; border-width: 5px; margin: 5px; }
滚动
<div class="container1" style="overflow: auto; height: 200px; width: 200px"> <ul class="container2" style="position: relative"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div>
// 把item 放在container的可视区域范围内 function scrollToDom(container, item){ // 当前元素 上边框上边 到 基线 的距离 const itemTop = item.offsetTop; // 当前元素 下边框下边 到 基线 的距离 const itemBottom = itemTop + item.offsetHeight; // container 上边框下边 距离 基线距离 const containerTop = container.scrollTop; // container 下边框上边 距离 基线距离 const containerBottom = containerTop + container.clientHeight; if(itemTop < containerTop){ container.scrollTop = itemTop; } if(itemBottom > containerBottom){ container.scrollTop = itemBottom - container.clientHeight; } }
<div class="container1" style="overflow: auto; height: 200px; width: 200px"> <ul class="container2" style="position: relative"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div>
// 把item 放在container的可视区域范围内 function scrollToDom(container, item){ // 当前元素 上边框上边 到 基线 的距离 const itemTop = item.offsetTop; // 当前元素 下边框下边 到 基线 的距离 const itemBottom = itemTop + item.offsetHeight; // container 上边框下边 距离 基线距离 const containerTop = container.scrollTop; // container 下边框上边 距离 基线距离 const containerBottom = containerTop + container.clientHeight; if(itemTop < containerTop){ container.scrollTop = itemTop; } if(itemBottom > containerBottom){ container.scrollTop = itemBottom - container.clientHeight; } }
此种结构特点
如果垂直滚动条已经出来了
.container1
的上下 padding 区域也会有内容
向上滑动
- 向上滑动, 实质是
.container2
向上滑动了 - 因为.container2.position == relative
li.offsetParent
也是.container2
, 所以.container1.scrollTop
和li.offsetTop
基准线都是.container2
的上边框, 具有可比性
—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/csstutorial/107546.html