gpt4 book ai didi

javascript - scrollIntoView() 将整个页面布局向上移动

转载 作者:行者123 更新时间:2023-11-27 23:35:05 28 4
gpt4 key购买 nike

当我们使用 scrollIntoView(true) 时,整个页面布局向上移动。根据我的要求,我需要使用 true 参数。我需要避免这个举动。我在 https://jsfiddle.net/7v4t31p0/ 中发布了此代码的工作副本提前谢谢你。

.body {
display: flex;
width: 100%;
border: 1px solid gray;
}

.left {
flex: 0 0 200px;
}

.right {
flex: 1 1 auto;
border: 1px solid green;
}

.details {
display: flex;
width: 100%;
}

.links {
display: flex;
flex-direction: column;
}

.content {
max-height: 100px;
overflow-y: auto;
flex: 1 1 auto;
}

.content div {
min-height: 100px;
}
<div>
<div>
Header
</div>
<div class="body">
<div class="left">
Left panel
</div>
<div class="right">
<div class="details">
<div class="links">
<button id='btn1'>link 1</button>
<button id='btn2'>link 2</button>
<button id='btn3'>link 3</button>
</div>
<div class="content">
<div id="content1"> Content 1</div>
<div id="content2"> Content 2</div>
<div id="content3"> Content 3</div>
</div>
</div>
</div>
</div>
</div>

最佳答案

使用这个而不是使用 true,true 的默认值是 block: start and inline: nearest 主体将上升(开始)。在您的情况下,它是您的父元素。

yourContent.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

关于javascript - scrollIntoView() 将整个页面布局向上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57282647/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com