餐厅网页点击菜单栏锚点链接跳转div时页面整体左移问题排查

触发原因 #

1. 核心诱因是div.test设置的width: 100vw属性：100vw的计算基准为浏览器完整视口宽度，不会扣除纵向滚动条占用的宽度。Windows平台下浏览器默认纵向滚动条宽度在12px到17px之间，当页面内容高度超过视口、纵向滚动条出现时，div.test的渲染宽度会比body的可用宽度多出滚动条的宽度，导致页面产生横向溢出，存在默认隐藏的横向滚动条。
2. 点击菜单栏锚点向下跳转时，浏览器为了将目标元素完整展示在视口范围内，会自动调整横向滚动位置，最终表现为整个页面向左偏移。
3. 滚动到页面底部或刷新页面时，横向滚动条会自动复位到最左侧，因此布局恢复正常；处于页面最底部的"Jak dojechać"区域时，锚点跳转不会触发横向滚动位置调整，因此不会复现异常。

修复方案 #

优先方案 #

将div.test的width: 100vw替换为width: 100%。100%以父元素的内容宽度为计算基准，会自动排除纵向滚动条的宽度，不会产生横向溢出。修改后代码如下：

div.test {
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    min-height: 300px;
    background-color: #1d1d1d;
    position: sticky;
    color: white;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}

备选方案（特殊场景需保留vw单位时使用） #

给页面根元素添加横向溢出隐藏属性，直接截断超出视口的内容，避免横向滚动条生成：

html, body {
    overflow-x: hidden;
}

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