带有锚链接的水平滚动 - div 无法正确缩放

Question

我正在尝试使用锚链接来触发不同的水平滚动 div 出现。

我有一个容纳多个子容器的主容器：子容器的宽度和高度都是固定的，以填充主容器，并启用了 Overflow-x。每个子项都垂直堆叠在一起，因此每个指向子项的跳转链接仅显示该子项：

`https://i.imgur.com/ZUiUDKd.png`

子级随其父容器缩放，但锚点不会保持位于父容器的左上角，从而在缩放窗口时显示所有隐藏的子级：

`https://i.imgur.com/5emHc4O.gif`

小提琴在这里。关于如何解决这个问题（或使用 JS 获得类似的结果）有什么想法吗？

Answer 1

您想使用滚动捕捉。

.scroll {
    height: 100%;
    overflow-y: hidden;
    scroll-snap-type: block mandatory;
}

.section {
    /* all you existing styles */
    scroll-snap-align: start;
}

---

作为与您的问题无关的一般评论，我强烈建议学习 CSS 网格布局。这将使您的整体应用程序结构更加简单（一旦您克服了学习曲线）。