一最安 2022-01-03 03:31 采纳率: 84.4%
浏览 88
已结题

请问如何将滚动条置底?

img


如图,每次输入新的内容,都需要自己手动下拉,非常影响用户体验,请问该如何修改使输入新的消息能使其自动滚动条滑到最底端呢?请赐教,不胜感激。
以下为发送消息的js:

function send(){

        let text = document.querySelector('#send-text').value;
        if(!text){
            alert('请输入内容');
            return ;
        }
        let item = document.createElement('div');
        item.className = 'item item-right';
        item.innerHTML = `
                        <div class="right-message">
                            <span>${text}</span>
                        </div>
                        <div class="avatar">
                           <img src="../static/images/user-avatar.png" alt="user-icon"/>
                        </div>


                        `;

        document.querySelector('.talk-box').appendChild(item);
        document.querySelector('#send-text').value = '';
        document.querySelector('#send-text').focus();
        //滚动条置底
        let height = document.querySelector('.talk-box').scrollHeight;
        document.querySelector(".talk-box").scrollTop = height;
        console.log("发送出去")
        answer(text)
    }


以下为html:

<div id="chat-block">
            <div class="chat-container">
            <div class="chat-header">
                <div class="doctor-name">智能医疗助手</div>
                <div class="icon-shrink">
                    <img src="../static/images/shrink.png" alt="shrink-icon" class="shrink" onclick="closeTalk()"/>
                </div>
            </div>


            <div class="content">
                <div class="talk-box">
                    <div class="item item-left">
                        <div class="avatar">
                            <img src="../static/images/doctor.png" alt="docter-icon"/>
                        </div>
                        <div class="left-message">
                            <span>您好,我是智能医疗助手,请详细描述您的问题。</span>
                        </div>
                    </div>



                </div>

            </div>

            <div class="input-area">

                 <textarea type="text" id="send-text" placeholder="请输入您的问题"></textarea>
                <div class="send-block">
                    <img src="../static/images/send_message.png" alt="icon-send" class="send-button" onclick="send()"/>

                </div>
            </div>
    </div>
        </div>


  • 写回答

2条回答 默认 最新

  • ✎﹏ℳ๓敬坤 2022-01-03 11:45
    关注
    
     var div = document.getElementByClassName('content)[0];
      div.scrollTop = div.scrollHeight;
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月11日
  • 已采纳回答 1月3日
  • 创建了问题 1月3日

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置