scrollIntoView不包含边框

Question

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

----------------------------------------------------------------------------
eno    |    ename    |    gender
----------------------------------------------------------------------------
1          jack           m
2          dude           m
3          crop           m
4          pert           m
----------------------------------------------------------------------------

但是，我随后在该子菜单元素中添加了2px边框，尽管该子菜单的行项目完全显示在查看器中，但边框却没有。它保持在视口的底部。 有没有一种方法可以在scrollIntoView中包含边框而无需在页面上添加其他元素？

谢谢。

Answer 1

好吧。根据CSS盒子模型（official W3 spec），边框实际上实际上位于元素本身的区域之外（就像边距一样，不同于填充）

所以..我想您要做的就是（动态地）获取元素top-border的值并调整页面滚动的计算（已回答here）和一个几乎没有调整here

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