一最安 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 为什么我运行这个网络会出现以下报错?CRNN神经网络
  • ¥20 steam下载游戏占用内存
  • ¥15 CST保存项目时失败
  • ¥15 树莓派5怎么用camera module 3啊
  • ¥20 java在应用程序里获取不到扬声器设备
  • ¥15 echarts动画效果的问题,请帮我添加一个动画。不要机器人回答。
  • ¥15 Attention is all you need 的代码运行
  • ¥15 一个服务器已经有一个系统了如果用usb再装一个系统,原来的系统会被覆盖掉吗
  • ¥15 使用esm_msa1_t12_100M_UR50S蛋白质语言模型进行零样本预测时,终端显示出了sequence handled的进度条,但是并不出结果就自动终止回到命令提示行了是怎么回事:
  • ¥15 前置放大电路与功率放大电路相连放大倍数出现问题