position sticky容器内元素聚焦时滚动异常Bug修复咨询

问题表现 #

• 基于position: sticky实现的滚动监听导航，在用户聚焦导航内的锚点链接、复选框、下拉按钮等可交互控件时，页面会触发非预期的异常滚动
• 该问题仅在容器使用position: sticky时触发，将定位改为position: fixed后异常消失
• 已排查排除页面脚本、左侧导航模块、元素类名冲突等影响因素，问题可在Chrome、Edge、Opera、Firefox多款主流浏览器稳定复现
• 初始考虑通过JavaScript手动模拟sticky定位逻辑解决，寻求更轻量的原生CSS解决方案

复现代码 #

HTML结构 #

<div id="secondary-nav" class="single-product-tabs white-shadow">
    <nav class="tabs-links js-scrollspy-tabs scrollspy-tabs tabs-dark container-fluid">
        <div class="effect" style="transform: translateX(500px)">
            <div class="bg"></div>
            <div class="shadow"></div>
        </div>
        <ul class="tabs-list">
            <li><a href="#dane-podstawowe">Dane podstawowe</a></li>
            <li><a href="#dane-techniczne">Dane techniczne</a></li>
            <li><a href="#opis">Opis</a></li>
            <li><a href="#zalaczniki">Załączniki</a></li>
        </ul>
    </nav>
    <div class="single-product-settings">
        <div class="dropdown dark-dropdown">
            <span>Waluta:</span><button type="button">PLN</button>
            <ul>
                <li><button>PLN</button></li>
                <li><button>USD</button></li>
                <li><button>€</button></li>
            </ul>
        </div>
        <label class="switch-wrapper">
            <span>Ceny brutto:</span>
            <div class="switch">
                <input type="checkbox" id="show-gross-prices">
                <span class="wajcha round"></span>
            </div>
        </label>
    </div>
</div>

核心CSS #

.single-product-tabs {
    background: var(--gray5);
    padding: 32px 32px 0 0;
    position: sticky;
    /* position: fixed; */
    inset: 56px 0 auto 0;
    z-index: 50;
    display: flex;
}

问题根因 #

异常由两个浏览器默认行为共同触发：

• 可交互元素获得焦点时，浏览器会默认执行滚动操作，尝试将聚焦元素对齐到视口可见区域
• sticky定位元素同时具备流内占位和流内固定的特性，浏览器计算聚焦元素位置时未计入sticky设置的top:56px偏移量，导致滚动距离计算错误，出现页面跳动

纯CSS修复方案 #

不需要编写JavaScript模拟sticky逻辑，仅需补充3条CSS规则即可完全修复，兼容所有支持sticky定位的现代浏览器：

1. 关闭sticky容器的滚动锚定，避免浏览器自动调整滚动位置：

.single-product-tabs {
    /* 保留原有样式，新增下方属性 */
    overflow-anchor: none;
}

2. 为sticky容器内所有可聚焦元素设置滚动边距，值和sticky的顶部偏移量保持一致，修正浏览器焦点对齐的计算偏差：

.single-product-tabs a,
.single-product-tabs button,
.single-product-tabs input {
    scroll-margin-top: 56px;
}

3. 若页面全局设置了平滑滚动，可给根元素设置原生滚动行为兜底，避免平滑滚动放大跳动效果：

html {
    scroll-behavior: auto;
}

该方案不会破坏sticky定位的原生特性，也不会出现fixed定位常见的宽度适配、占位高度塌陷等衍生问题，性能远高于JS模拟实现。

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