亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

錨定溢出自動(可滾動)內容

錨定溢出自動(可滾動)內容

收到一只叮咚 2023-09-28 16:40:28
我正在構建一個評論系統,我希望用戶能夠從其他任何地方直接重定向到評論(就像堆棧溢出評論通知)。這是我到目前為止所得到的。(下面的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,它會跳轉到相應的區域。如果有人建議我哪一部分出錯了,我會很高興。
查看完整描述

1 回答

?
瀟瀟雨雨

TA貢獻1833條經驗 獲得超4個贊

我可以建議嘗試scrollIntoView作為可能的解決方案嗎?


function comment_jump(id){

    var el = document.getElementById(id);

    el.scrollIntoView();

}


來自 Mozilla 的文檔:


scrollIntoView() 方法滾動元素的父容器,以便用戶可以看到調用scrollIntoView() 的元素


因此,它會將注釋容器滾動到所需的元素。


查看完整回答
反對 回復 2023-09-28
  • 1 回答
  • 0 關注
  • 101 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號