由于`position:sticky`或`position:fixed`CSS而跳过自动滚动行为

Question

我在控制台中收到这样的警告。当编码 Nextjs 时

我的代码

  <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}>
....
</aside>

CSS

.site-off {
    position: fixed;
    width: 320px;
    height: var(--percent100);
    background-color: var(--white-color);
    overflow-y: auto;
    z-index: 1000;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.4s, visibility 0.4s;
    will-change: transform, visibility;
}

Answer 1

用

div

包裹相关元素似乎可以解决问题：

<div>
    <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}>
      ....
    </aside>
</div>

更多信息在这里：https://github.com/shadcn-ui/ui/issues/1355#issuecomment-1867533627