将元素聚焦在位置粘性容器内时出现滚动错误

Question

我已经为页面创建了粘性滚动间谍导航，但是当用户聚焦链接或复选框时，会出现奇怪的行为。此错误仅在容器具有位置粘性时才会发生，在位置固定时不会发生这种情况。我尝试删除所有脚本，删除左侧问题仍然存在的导航，并更改类名称。在 Chrome、Edge、Opera 和 Firefox 上检查了此问题。我解决这个问题的唯一想法是使用一些 javascript 来模仿位置粘性行为，但也许有一些更简单的解决方案。

<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>

.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;
}

电影：https://youtu.be/9GRIWGO0g_g

Answer 1

此问题可能与

position: sticky

的一个或多个问题/错误有关。

请参阅以下未解决的 Chromium 错误...

https://bugs.chromium.org/p/chromium/issues/detail?id=1257719 https://bugs.chromium.org/p/chromium/issues/detail?id=1178622

就我而言，页面顶部有一个导航面板，我看到上面@Bennett McElwee评论的相同或类似问题。也就是说，如果

position: sticky

元素中的某个元素获得焦点，则通过 Tab 键（使用键盘）切换到

position: sticky

元素中的后续元素将滚动页面。

在 Firefox 中，问题有所不同 - 不太明显 - 但它仍然无法正常工作。

我还没有找到一种方法可以让

position: sticky

按我需要的方式工作，而不遇到这个问题。

我的解决方法部分是使用

position: fixed

代替，并在

main

元素的顶部添加填充。

.navigate-banner {
    ...
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    ...
}

main {
    padding-block-start: calc(var(--navigate-banner-current-height) * 1px);
}

Sven Wolferman 的 Codepen scroll-margin-top /scroll-padding、平滑滚动和固定标题对于演示解决方法非常有帮助。

Answer 2

最初的问题没有具体说明正在发生的实际问题（链接的视频现在已经消失了），但我遇到了这个问题，寻找答案，解释当我在

position: sticky

元素内移动键盘焦点时，为什么我的页面会滚动在

top: 0

，所以我认为这是最初的问题。

原因

根据 @Graymatter 链接的 Chromium bug（Bug #40796549、Bug #40749247），看起来滚动填充与

position: sticky

交互存在一些浏览器问题。问题似乎是，当焦点移动时，浏览器会尝试滚动窗口，以在聚焦于视口边缘附近的元素周围添加足够的滚动填充。正如链接的错误所暗示的那样，逻辑可能应该考虑到这样一个事实：尝试在某些

scroll-padding

元素内调整

position: sticky

（例如始终粘在屏幕顶部的标题）通常不会按预期工作只会导致毫无意义的滚动。

解决方法

这些错误还没有明确的修复方法，因此链接错误的评论中提到的一个可能的简单解决方法是简单地将滚动容器的

scroll-padding

设置为

0

。您可以通过执行以下操作将其设置为根窗口：

:root {
  scroll-padding: 0;
}

我认为这并不理想，因为它会覆盖整个文档（或整个网站）的滚动填充，并且可能会影响其他元素的可用性。在阅读了设置

scroll-padding

意味着什么后，最好谨慎使用。

作为一个兴趣点，我遇到了一个规范提案，允许设置或覆盖每个元素

scroll-padding

，这可能会有所帮助，但在不久的将来不太可能。