利用scrollintoview方法模拟聊天室收到新消息

时间：2021-06-01 20:40:14

　　这段时间再写一个聊天的功能，基本的原理已经通了，剩下的就是细化功能和实现了。原理通了不代表就能解决了这个问题，今天就遇到了一个小问题，就是在接收到新的消息以后，最新的消息不能显示在消息区域，而是跑到了最下面，需要手动划出来。这样的体验肯定是不行的，所以我们就在网上查找解决办法，有的使用js计算高度，然后页面滚动，这种方法虽然比较麻烦，但是确实能解决问题。但是今天又找到了一个更好的办法，就是利用scrollIntoView方法来实现。

　　首先说一下注意事项，scrollIntoView这个方法首先的一点是原生的js 的方法，所以就不能使用jQuery选择器来选择元素，否则就要报错了。看下面的截图：

利用scrollintoview方法模拟聊天室收到新消息

　　所以我们就需要使用原生的选择器，来选择，其中document.querySelectorAll()就是一个很好的选择方法。还有就是，scrollIntoView()这个方法中是可以传参的，默认的参数是true。也就是说会把你选择的元素的顶部显示在你浏览器或者滚动区域的顶部。也就是头与头对齐。如果你传false的话，就是正好相反的，就是选择元素的底部显示在浏览器或者滚动区域的底部，也就是底与底对齐。废话不多说，直接看程序吧。

　　

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>模仿聊天室滚动的方法</title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

             }

             #center{

                 width: 500px;

                 height: 600px;

                 border: 1px solid #CCCCCC;

                 overflow-y: scroll;

             }

             #center p{

                 width: 400px;

                 height: 100px;

                 border: 1px solid #CD235C;

             }

             #center p:nth-of-type(2n){

                 background: #CCCCCC;

             }

         </style>

     </head>

     <body>

         <h1>利用scrollintoview方法来模仿聊天室滚动</h1>

         <h2>利用button按钮来触发，模拟收到一条消息</h2>

         <div id="center">

             <p>叮叮叮，收到了0条新消息</p>

         </div>

         <button>收到一个信息</button>

     </body>

     <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

     <script type="text/javascript">

         $("button").click(function(){

             console.log("点击了按钮");

             var length = $("#center p").length;

             $("<p>叮叮叮，收到了"+length+"条新消息</p>").appendTo($("#center"));

             document.querySelectorAll("p")[length].scrollIntoView(false);

             //$("p").scrollIntoView(false);//报错,不能使用jQuery的选择器

         });

     </script>

 </html>

　　利用下面的按钮来模拟接收到了新的消息，然后选择到最后的那个p标签，让他的底部与聊天窗口的底部对齐。就实现了这个功能！有什么不对的地方，欢迎讨论

相关文章