给div"上"滑动条-LMLPHP最近做项目时修改一个遗留的bug,大概是这样:有一个聊天窗口,用户聊天内容展现在窗口上。其实这个窗口是一个带滑动条的div,随着聊天内容的添加,滑动条也越来越长了,这不是重点,重点是每次刷新窗口时候,滑动条的内容都是显示前面的内容,可是实际是我们希望聊天内容展示给用户的,应该是最后的内容,这就驱动了一个小功能,如何让滑动条在窗口刷新的时候总是在停留在底端。

Demo:   

  <!DOCTYPE html>
    <html>
      <head>
      <meta charset="utf-8">
      <title>div添加滑动条</title>
      </head>
    <body>
      <div style="width:260px;height:60px; overflow:auto; border:1px solid;" id="divContain">
        这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
        这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
        这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
        这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
        这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
        这里是你要显示的内容 ,怎么说好。人怎么能如此无情尼,哈哈,毕业那年啊,老师都很失望,对我;
      </div>
               <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
               <script type="text/javascript">
                     var divContain = document.getElementById('divContain');
                     //TODO 滚动条滑到底部
                     $('#divContain').scrollTop( divContain.scrollHeight); //.scrollHeight这个是js的属性
              </script>
             </body>
         </html>

没有执行这句js的时候,每次内容刷新老是显示在前头,看到以下哪个滑动条呆在首行没,哪有用户每次发完信息,就滚动到最后查看最新消息的喔

$('#divContain').scrollTop( divContain.scrollHeight); //.scrollHeight这个是js的属性

给div&quot;上&quot;滑动条-LMLPHP

执行以上这句代码后,滑动条永远呆在下面了,用户不用手动拉到最后看消息了

给div&quot;上&quot;滑动条-LMLPHP

         divContain.scrollHeight这个很重要,主要是说滑动条的长度.... scrollHeight是一个属性

哈哈,小功能完成了,收工睡觉撒。

05-11 07:38