Question

我有一个固定的导航侧边栏，并希望在子级别上使用过渡到上滑/下滑动画。由于某些未知原因，Chrome在动画时滚动页面。因为这只发生在Chrome中，所以可能是一个错误。有人知道出了什么问题吗？

html,body {
    margin: 0;
    padding: 0;
    color: white;
}

#content {
    position: relative;
    height: 4000px;
    overflow: auto;
    background: grey;
}

#fixed {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    width: 200px;
    background: red;
    overflow-x: hidden
    overflow-y: auto;
}

#test {
    max-height: 0;
    background: blue;
    transition: max-height 0.5s, padding-bottom 0.5s;
    overflow: hidden;
}
#test:target {
    max-height: 50vh;
}

#testContent {
    height: 200px;
    background: green;
}

<div id="content">
    <div id="fixed">
        <a href="#test">Open Test</a><br/>
        <a href="#">Close Test</a><br/>
        <div id="test">
            <div id="testContent"></div>
        </div>
    </div>
</div>

Answer 1

在过去的5年中，向那些没有答案的可怜人，我也一样...我给你的礼物：

overflow-anchor: none

将其添加到父容器/包装器容器似乎对我来说是成功的窍门。有关此属性的更多详细信息，请点击此处：https://css-tricks.com/almanac/properties/o/overflow-anchor/

使用固定容器内的CSS max-height过渡的Chrome滚动错误

1 个答案: