javascript - Javascript 使用 Padding Aware 检测溢出

Question

我正在制作一个可以根据屏幕宽度在桌面版和移动版之间转换的导航栏。

@media (min-width: ${minWidth}px)与用于切换的 Bootstrap 导航栏不同，
我通过比较&使用 JavaScript 进行溢出检测。$0.clientWidth$0.scrollWidth

问题是，paddingRight不减去$0.clientWidth，因此检测不准确。

如 Chrome 的页面检查器所示，我想在没有填充的情况下获得实际的客户端宽度。
如图中绿色矩形所示：

笔记：

• 我不能通过添加::after填充右侧来应用 hack，因为容器是网格，从而导致难看的列间隙。
• 我无法将marginRight 应用于菜单，因为边距将填满gridArea。

这是我的导航栏的模型。
请关注 .js 文件： 查看和编辑我的沙箱

标签： javascripthtmlcssdom

Answer 1

If you are using list, i mean if your structure is like as

<ul>
   <li>
       <a href="#">
       </a>
   </li>
</ul>

Then give the padding to the anchor tag, and then get the width of the li tag, your problem will be resolve