JavaScript如何实现感知padding的溢出检测 适配响应式导航栏切换

我正在开发一款可根据屏幕宽度在桌面版和移动端之间切换的响应式导航栏。
与Bootstrap导航栏使用@media (min-width: ${minWidth}px)媒体查询实现切换的逻辑不同，我选择通过JavaScript做溢出检测，对比$0.clientWidth与$0.scrollWidth的数值来判断是否切换形态。
目前遇到的问题是：paddingRight不会从$0.clientWidth中被扣除，导致溢出检测结果不准确。
我希望获取Chrome页面检查器中展示的、不含padding的实际可用内容宽度，即示意图中绿色矩形标注的区域：

限制条件 #

• 不能使用添加::after填充右侧的hack方案，导航栏容器是grid布局，会产生难看的列间隙。
• 不能给菜单设置marginRight属性，margin会填满整个gridArea区域。
  导航栏效果示意：
  

解决方法 #

通过getComputedStyle读取元素的左右padding值，从clientWidth中扣除即可得到和Chrome开发者工具一致的纯内容宽度：

// 获取元素不含padding的纯内容宽度
function getPureContentWidth(element) {
  const computedStyle = window.getComputedStyle(element);
  const paddingLeft = parseFloat(computedStyle.paddingLeft);
  const paddingRight = parseFloat(computedStyle.paddingRight);
  return element.clientWidth - paddingLeft - paddingRight;
}

调整后的溢出检测逻辑：

const navWrapper = document.querySelector('你的导航容器选择器');
const availableWidth = getPureContentWidth(navWrapper);
// scrollWidth本身包含内容溢出的宽度、不含容器padding，直接和可用内容宽度对比即可
const isOverflow = navWrapper.scrollWidth > availableWidth;

// 后续根据isOverflow的值判断是否切换移动端/桌面端形态即可

该方案不需要调整现有布局，不会引入额外样式冲突，完全适配你的grid布局场景，计算结果100%匹配Chrome开发者工具中绿色标注的内容区域宽度。 #

内容的提问来源于stack exchange，提问作者Heyyy Marco