我有一个嵌套的子容器,但是当我尝试使用 scrollIntoView
时,它会破坏父容器。我无法理解为什么会出现这种情况。请帮我解决这个问题。
请查看下面的代码或在jsfiddle上查看。
function moveToTop() {
console.log('MOVE TO TOP::');
const child = document.getElementById('child');
child.scrollIntoView({
behavior: "smooth"
});
}
#parent {
background-color: blue;
padding: 10px;
height: 500px;
overflow: hidden;
display: flex;
flex-direction: column;
}
#scroller {
overflow: auto;
padding: 10px;
background-color: red;
flex-grow: 1;
}
#child {
height: 10000px;
background-color: green;
}
body {
overflow: hidden;
color: #fff;
font-weight: bold;
}
button {
position: fixed;
bottom: 20px;
width: 140px;
left: 20%;
right: 0;
}
<div id="parent">
PARENT
<div id="something">Something</div>
<div id="scroller">
CHILD
<div id="child">
GRAND CHILD
<button onclick="moveToTop()">Top</button>
</div>
</div>
</div>
scrollIntoView
事件时,尽管溢出在子元素中,滚动条会打破进入父视图。如果你看一下jsfiddle,可能会更好地理解我想表达的意思。对于我的糟糕英语表示抱歉。 - mkamranhamidscrollIntoView
的工作方式就是滚动到指定项目的顶部。一切都是正确的。您想要看到什么通用行为? - s.kuznetsov