当用户与站点交互时禁用自动滚动 'scrollToBottom' 功能

Question

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

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

这些大概花了我最接近的解决方案： 滚动底部，除非用户向上滚动保持溢出DIV，这一个保持滚动底部，除非用户改变滚动的位置。

两天后我在这里，我自己的坚持（或愚蠢）的受害者，我会很感激帮助的人。

这在前面提到的函数中：

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>

我的 div 使用 CSS 进行样式设置，如下所示：

.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

}

我尝试遵循此处的指南，但我确定我错过了一些步骤！我希望代码量有助于澄清而不是混淆。如果不是，请写下可以进一步澄清的内容。

Answer 1

这是我在聊天系统中用于自动滚动的代码。基本上它检查滚动条是否在底部（或接近）并自动向下滚动。如果不是，则不会。只需将数字 450 更改为您认为合适的任何数字即可。数字越小，阈值越小：const elem = document.getElementById('messages');const scrollDiff = (elem.scrollHeight - elem.scrollTop) - elem.clientHeight;if(scrollDiff < 450){&nbsp; &nbsp; elem.scrollTop = elem.scrollHeight;}你应该能够把它放在你的scrollToBottom ()函数中。