当我们使用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>
答案 0 :(得分:0)
使用它代替true,默认值为true block: start and inline: nearest
,主体将上升(开始)。在您的情况下,它是您的父元素。
yourContent.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
答案 1 :(得分:0)
谢谢大家。我使用ScrollTop而不是ScrollIntoView()。
这是我的工作代码演示https://jsfiddle.net/6gu4rkc1/
content1.parentNode.scrollTop = content1.offsetTop - 30;