摘要 今天小编跟大家讲解下有关DOM盒模型和位置 client offset scroll 和滚动的关系 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集

今天小编跟大家讲解下有关DOM盒模型和位置 client offset scroll 和滚动的关系 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关DOM盒模型和位置 client offset scroll 和滚动的关系 的相关资料，希望小伙伴们看了有所帮助。

概览

在dom里面有几个描述盒子位置信息的值

pading border marginwidth heightclientclientWidth 不要borderclientHeight不要borderoffsetoffsetTopoffsetLeftoffsetWidth 要borderoffsetHeight 要borderscrollscrollTopscrollHeightscrollLeftscrollWidth盒模型

生产环境一般使用 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; }}

此种结构特点如果垂直滚动条已经出来了

.container1的上下 padding 区域也会有内容

向上滑动

向上滑动 实质是.container2向上滑动了因为.container2.position == relativeli.offsetParent 也是.container2, 所以.container1.scrollTop和li.offsetTop基准线都是.container2的上边框 具有可比性

来源：爱蒂网