javascript - scrollIntoView 不包含边框

Question

我使用的是 Javascript(没有 jQuery)，并且我有一个弹出的子菜单元素，它有时会超出查看器的底部，所以我使用scrollIntoView让子菜单立即移动以包含所有内容行项目完全在视口(viewport)内(即子菜单的底部与视口(viewport)的底部对齐。

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

但是，我随后向该子菜单元素添加了一个 2px 边框，尽 pipe 菜单的行项目完全显示在查看器中，但边框却没有；它仍然远离视口(viewport)的底部。 有没有办法在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);