Javascript 禁用自动滚动'；滚动底部'；用户与站点交互时的函数

当然，这个问题被问到了，也得到了不同程度的回答，但我是个傻瓜，我迷路了。我在YouTube上关注WebDevTravely关于Node.js、Socket.io和聊天应用程序的教程；他跳过了实现“当一个用户滚动旧消息而另一个用户发布消息时，禁用滚动到底”的部分，因为这应该很容易通过快速谷歌搜索解决

我在Chrome中发布了一个自动点击功能来发布消息。然后在另一个窗口中，表现得像另一个用户。我希望能够滚动和阅读旧邮件，而不必每次我的自动点击用户发布新邮件时都被翻到底部

这些可能是我最接近解决方案的地方： 还有这个

两天后，我来到了这里，成为我自己坚持（或愚蠢）的牺牲品，我将感谢你们的帮助

在前面提到的功能中：

function scrollToBottom () {
  let messages = document.querySelector('#messages').lastElementChild;
  messages.scrollIntoView();
}

在此函数中调用该函数，该函数将创建新消息：

socket.on('newMessage', function (message) {
  const formattedTime = moment(message.createdAt).format('LTS');
  const template = document.querySelector('#message-template').innerHTML;
  const html = Mustache.render(template, {
    from: message.from,
    text: message.text,
    createdAt: formattedTime
  });

  const div = document.createElement('div');
  div.innerHTML = html;

  document.querySelector('#messages').appendChild(div);
  scrollToBottom();
});

我的div看起来像这样：

    <div class="chat__main" id="scrollsolve">
        <ol id="messages" class="chat__messages"></ol>

        <div class="chat__footer">
            <form id="message-form">
                <input name="message" type="text" placeholder="Message" autofocus autocomplete="off" />
                <button type="submit" id="submit-btn">Send</button>
            </form>
            <button type="button" id="send-location">Send Location</button>
        </div>
    </div>

.chat__main {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%
}

.chat__messages {
    flex-grow: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding: 10px
}

---

我试着在这里遵循指导原则，但我肯定我错过了一些步骤！我希望代码的数量有助于澄清而不是混淆。如果没有，请写下可以进一步澄清的内容。

这是我在聊天系统中用于自动滚动的代码。基本上，它检查滚动条是否在底部（或接近底部），并自动向下滚动。如果不是，也不是

只要把450换成你觉得合适的号码就行了。数字越小，阈值越小：

const elem = document.getElementById('messages');
const scrollDiff = (elem.scrollHeight - elem.scrollTop) - elem.clientHeight;

if(scrollDiff < 450){
    elem.scrollTop = elem.scrollHeight;
}

const elem=document.getElementById（'messages'）；
常量scrollDiff=（elem.scrollHeight-elem.scrollTop）-elem.clientHeight；
如果（滚动差异<450）{
elem.scrollTop=elem.scrollHeight；
}

---

您应该可以将其放入

scrollToBottom（）

函数中。

非常感谢！这就是我的函数的结局，注释是旧函数：函数scrollToBottom（）{const elem=document.getElementById（'messages'）；const scrollDiff=（elem.scrollHeight-elem.scrollTop）-elem.clientHeight；if（scrollDiff<450）{elem.scrollTop=elem.scrollHeight；//let messages=document.querySelector（“#messages”）.lastElementChild；//messages.scrollIntoView（）；}`@PastOfTear对我来说很好。很高兴我能帮上忙：）