javascript - scrollIntoView 不包括边框

Question

我正在使用 Javascript（没有 jQuery）并且我有一个弹出的子菜单元素，有时会超出查看器的底部，所以我使用 scrollIntoView 让子菜单立即移动以拥有所有订单项完全在视口内（即子菜单的底部与视口的底部对齐。

document.getElementById('sub1').scrollIntoView(false);

然而，我随后为该子菜单元素添加了一个 2px 的边框，虽然子菜单的行项目完全显示在查看器中，但边框没有；它保持在视口底部。有没有办法在 scrollIntoView 中包含边框而不向页面添加另一个元素？

提前致谢。

标签： javascript

Answer 1

嗯.. 根据 CSS 盒子模型（官方 W3 规范），边框实际上是在元素本身的区域之外（就像边距，不像填充）

所以..我想你所要做的就是top-border（动态地）获取元素的值并调整页面滚动的计算（已经在这里回答）和在这里找到的一些调整

var element = document.getElementById('sub1');
element.scrollIntoView(false);
document.documentElement.scrollTop -= element.style.borderTopWidth.slice(0, -2);