Question

我正在开展一个我现在正在聊天的项目。所有与聊天相关的工作都很好，但我的问题是我希望在overflow-y处于活动状态时将聊天窗口固定在底部，这样我就不必手动向下滚动来查看最新消息。（Facebook聊天＆twitch.tv聊天工作的方式）

（我很抱歉，由于我不知道该怎么做，我无法表现出我的任何尝试。）

提前致谢。

编辑：以下是一些HTML＆amp; CSS代码。

注意：实际消息将作为字符串推送到日志

// CSS

#chat {
  margin-top: 110px;
  background-color: #FAF9FA;
  height: 75%;
}

#chat-window {
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

// HTML

<div class="col-sm-3">
    <div id="chat">
        <div id="chat-window">
            <div id="logs">

            </div>
        </div>

        <input type="spec" id="message" placeholder="Type your message..."/></br>
        <button id="send" class="btn">Send</button>

    </div>
</div>

Answer 1

我不知道我是否抓住了你的目标，但我认为只是css位置：修复解决你的问题。

.chat-box {
   position: fixed;
   background: #ccc;
   right: 0;
   bottom: 0;
   padding: 20px;
}

示例：https://jsfiddle.net/Julivan/261qjdp9/

希望有所帮助

Answer 2

好吧，如果你的目标只是滚动到底部：

window.scrollTo(0, document.getElementById('myChatWindow').scrollHeight);

将聊天窗口固定到底部

2 个答案: