【原创】div层内容溢出后如何保证滚动条实时自动同步滚动到最底部?

blogdaren 2018-10-29 抢沙发 91人次

问题背景:

固定宽度和高度的div层,当div里的内容在超出固定的高度之后,即产生了溢出,如何保证滚动条实时自动同步滚动到最底部?

解决方案:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>

<style>
#tips{
    width:350px;
    height:580px;    
    color:red;    
    font-size:18px;
    border:5px solid red;
    word-break:break-all;
    padding:5px;
    overflow-y:scroll;
}
</style>
<script type="text/javascript" src="./js/jquery.min.js"></script>

<script type="text/javascript">
$().ready(function(){
    var msg = "欢迎访问金牛座技术博客:http://www.blogdaren.com<br>";
    $("#tips").empty();
    setInterval(function(){
        $("#tips").append(msg);
        var tipsDiv = document.getElementById("tips");
        tipsDiv.scrollTop = tipsDiv.scrollHeight;
    }, 300);
})
</script>
</head>

<body>
<div id="tips"></div>
</body>

</html>

效果图预览:

55.png

#div滚动条到最底部#

版权声明:除非注明,本文由( blogdaren )原创,转载请保留文章出处。

本文链接:【原创】div层内容溢出后如何保证滚动条实时自动同步滚动到最底部?

发表评论:

您的昵称:
电子邮件:
个人主页: