有没有办法让某些组件（i，e <div>s）在网页上自动滚动？

Question

我正在设计一个基本的聊天网页，但是每当消息多于屏幕无法向下滚动显示时，您必须向下滚动才能看到更新的消息。有没有办法解决这个问题，以便在发送新消息时网页自动滚动（或类似的解决方案）？任何帮助将不胜感激。这是我的 HTML:

<!doctype html>
<html>
  <head>
    <title>QuickChat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; text-align: center; }
      form { background: #666666; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 100; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: #FFCC00; border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
      main {text-align: center; margin: 0; }
    </style>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send!</button>
    </form>
  <text>[SYSTEM]: Welcome to the chat! two things you should know: 1. There are no usernames.
      I'm working on it, but for right now you can type your messages like [your name] [your message].
      2. This chat is fairly secure, but PLEEEASE don't send any secret stuff accross it (like passwords) unless absolutely necessary.
      Thanks for using my website! -C
  </text>
  </head>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text('[USER]: ' + msg));
    });
  });
  </script> 

  <body>
  <div id="main">
  <ul id="messages"></ul>
  </div>
  </body>
</html>

Answer 1

添加新消息后调用- $('#messages').scrollTop($('#messages').prop('scrollHeight'))

Answer 2

您可以在消息发送后将此添加到代码中。

socket.on('chat message', function(msg){
  $('#messages').append($('<li>').text('[USER]: ' + msg));
  var objDiv = document.getElementById("messages");
  objDiv.scrollTop = objDiv.scrollHeight;
});

body {
  overflow-x: hidden;
  overflow-y: visible;
}

#messages{
   width: 300px;
   height: 200px;
   overflow-x: hidden;
   overflow-y: visible;
   background-color: dodgerblue;
}

#messages > span{
  position: relative;
  top: 2000px;
}

<button onClick="scrollToBottom('messages')">Scroll To Bottom</button>
<div id="messages">
<div style="width: 100%; text-align: center; font-size: 20px;">Header</div>
<span>Bottom of div</span>
</div>
<button onClick="scrollToTop('messages')">Scroll To Top</button>
<script>
function scrollToBottom (id) {
   var div = document.getElementById(id);
   div.scrollTop = div.scrollHeight - div.clientHeight;
}
function scrollToTop (id) {
   var div = document.getElementById(id);
   div.scrollTop = 0;
}
</script>

如果你想平滑地滚动到div的底部（或顶部），你可以使用jQuery的animate()。

body {
      overflow-x: hidden;
      overflow-y: visible;
    }

    #messages{
       width: 300px;
       height: 200px;
       overflow-x: hidden;
       overflow-y: visible;
       background-color: dodgerblue;
    }

    #messages > span{
      position: relative;
      top: 2000px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="scrollToBottom('messages')">Smoothly Scroll To Bottom</button>
    <div id="messages">
    <div style="width: 100%; text-align: center; font-size: 20px;">Header</div>
    <span>Bottom of div</span>
    </div>
    <button onClick="scrollToTop('messages')">Smoothly Scroll To Top</button>
    <script>
    function scrollToBottom (id) {
       var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: div.scrollHeight - div.clientHeight
   }, 500);
    }
    function scrollToTop (id) {
      var div = document.getElementById(id);
   $('#' + id).animate({
      scrollTop: 0
   }, 500);
    }
    </script>

Answer 3

您可以在 <li> 上调用 scrollIntoView()，当您附加它时，例如：

$('<li>').text('[USER]: ' + msg).appendTo('#messages').get(0).scrollIntoView();

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

The Element.scrollIntoView() method scrolls the element on which it's called into the visible area of the browser window.

您还应该在样式表中将 scroll-behavior 设置为 smooth，以停止浏览器从 'jumping' 到目标。

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

The scroll-behavior CSS property specifies the scrolling behavior for a scrolling box when scrolling is triggered by one of the navigation or CSSOM scrolling APIs.

有没有办法让某些组件（i，e <div>s）在网页上自动滚动？

is there a way to make certain components (i,e <div>s) self-scrolling on a webpage?

html

javascript

webpage

chat