锚定溢出自动（可滚动）内容

Question

我正在构建一个评论系统，我希望用户能够从其他任何地方直接重定向到评论（就像堆栈溢出评论通知）。

这是我到目前为止所得到的。（下面的demo显示不太好，请参考codepen）

const comment_box = document.getElementById('comment-box');

const fourth = document.getElementById('btn4');

const seventh = document.getElementById('btn7');

const tenth = document.getElementById('btn10');

function comment_jump(id){

    var el = document.getElementById(id);

    // getBoundingClientRect: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

    // top (of this comment refer to parent) = top (of this comment refer to page) - top (of container refer to page)

    var tp = el.getBoundingClientRect().top - comment_box.offsetTop;

    comment_box.scrollTo(0, tp);

}

fourth.addEventListener('click', ()=>{

    comment_jump('comment4');

});

seventh.addEventListener('click', ()=>{

    comment_jump('comment7');

});

tenth.addEventListener('click', ()=>{

    comment_jump('comment10');

});

body{

    background: lightgrey;

}

#comment-box{

    width: 500px;

    height: 300px;

    background: grey;

    overflow: auto;

}

.comment{

    width: 100%;

    height: 33.3%;

    border: 1px solid;

    font-size: 2em;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;    

}

button{

    font-size: 1.5em;

    margin: 2em;

}

button:hover{

    opacity: .5;

    cursor: pointer;

}

<div id="comment-box">

    <div class="comment"></div>

    <div class="comment"></div>

    <div class="comment"></div>

    <div id="comment4" class="comment">4th</div>

    <div class="comment"></div>

    <div class="comment"></div>

    <div id="comment7" class="comment">7th</div>

    <div class="comment"></div>

    <div class="comment"></div>

    <div id="comment10" class="comment">10th</div>

    <div class="comment"></div>

    <div class="comment"></div>

</div>

<button type="button" id="btn4">4th</button>

<button type="button" id="btn7">7th</button>

<button type="button" id="btn10">10th</button>

预期的输出是，当我点击4th、7th、时10th，它会跳转到相应的区域。

如果有人建议我哪一部分出错了，我会很高兴。

Answer 1

我可以建议尝试scrollIntoView作为可能的解决方案吗？function comment_jump(id){&nbsp; &nbsp; var el = document.getElementById(id);&nbsp; &nbsp; el.scrollIntoView();}来自 Mozilla 的文档：scrollIntoView() 方法滚动元素的父容器，以便用户可以看到调用scrollIntoView() 的元素因此，它会将注释容器滚动到所需的元素。