scrollTop，scrollHeight问题！？
代码 56 行： conBox.scrollTop = conBox.scrollHeight; //为什么这句代码不起作用呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,ul,li,h3,a {margin:0; padding:0; list-style: none; display: block; }
h3 { font-size: 16px; font-family: 微软雅黑; font-weight: normal;}
body { background: #00b38a url('http://passport.lagou.com/static/images/bgwall.png') center 100px no-repeat;}
#container { width: 270px; height: 370px; background: #fff; border:5px solid #056A58; padding:10px; margin:0 auto; overflow-y: scroll;}
#message-box { }
#message-box li { max-width: 300px; min-height: 35px; margin-top: 15px; overflow: hidden; padding-bottom: 5px; }
.icon{ width:30px; height:30px; }
.mesInfo .content { margin: 0 10px; background: #DEEDFF; padding:8px; max-width: 180px; box-shadow: 2px 2px 3px #999; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -ms-border-radius:5px;}
.mesInfo .left .icon { float: left; background:url('http://i2.tietuku.com/38ac5a121335c8ce.jpg') no-repeat 0 0;}
.mesInfo .right .icon { float: right; background:url('http://i2.tietuku.com/426b90ba0a60fb01.jpg') no-repeat 0 0;}
.mesInfo .right .content { float: right; }
.mesInfo .left .content { float: left;}
#msgbox { width: 300px; height:105px; margin: 0 auto; overflow: hidden; position: relative; background: #fff;}
#msgbox .icon1 { width:30px; height:30px; background:url('http://i2.tietuku.com/38ac5a121335c8ce.jpg') no-repeat 0 0; }
#msgbox .icon2 { width:30px; height:30px; background:url('http://i2.tietuku.com/426b90ba0a60fb01.jpg') no-repeat 0 0; }
#msgbox .icon { margin: 5px; cursor: pointer;}
.icon-box { float: left;}
.msgcontent { float: right; margin:5px; }
.msgcontent textarea { resize:none; }
#reset { position: absolute; right: 55px; bottom: 5px; }
#send { position: absolute; right: 5px; bottom: 5px; }
#msgbox .sel { width: 29px; height: 29px; border: 1px solid red;}
</style>
<script>
window.onload = function (){
var tarea1 = document.getElementById('tarea');
var msglist = document.getElementById('message-box');
var newLi = document.createElement('li');
var conBox = document.getElementById('container');
var icon1 = document.getElementById('icon1');
var icon2 = document.getElementById('icon2');
var oSend = document.getElementById('send');
icon1.onclick = function (){
icon1.className = "icon1 icon sel";
icon2.className = "icon2 icon";
oSend.onclick = function (){
msglist.innerHTML += "<li class=\"mesInfo\"><div class=\"left\"><span class=\"icon\"></span><h3 class=\"content\">" + tarea1.value + "</h3></div></li>";
msglist.appendChild(msglist);
conBox.scrollTop = conBox.scrollHeight; //为什么这句代码不起作用呢？
};
};
icon2.onclick = function (){
icon2.className = "icon2 icon sel";
icon1.className = "icon1 icon";
oSend.onclick = function (){
msglist.innerHTML += "<li class=\"mesInfo\"><div class=\"right\"><span class=\"icon\"></span><h3 class=\"content\">" + tarea1.value + "</h3></div></li>";
msglist.appendChild(msglist);
conBox.scrollTop = conBox.scrollHeight; //为什么这句代码不起作用呢？
};
};
}
</script>
</head>
<body>
<div id="container">
<ul id="message-box">
<li class="mesInfo"><div class="left"><span class="icon"></span><h3 class="content">我负责打打杀杀，你负责貌美如花！</h3></div></li>
<li class="mesInfo"><div class="right"><span class="icon"></span><h3 class="content">额，好哒！</h3></div></li>
</ul>
</div>
<div id="msgbox">
<div>
<a class="icon1 icon" id="icon1"></a>
<a class="icon2 icon" id="icon2"></a>
</div>
<div>
<form>
<textarea id="tarea" cols="32" rows="4" placeholder="[文明用语] 随便说点什么吧！"></textarea>
<button id="reset" type="reset" value="Reset">重置</button>
<button id="send" type="button" value="Submit">发送</button>
</form>
</div>
</div>
</body>
</html>
_Jason浏览 2665回答 1
1回答
-
灵感ls展望
这段javascript代码是不是要实现发送后，滚动条随着发送内容多少滚动，一直显示最下面的。如果是的话，把53这行代码去掉吧，它已经报错了，去掉就可以跟着滚动了
随时随地看视频慕课网APP
Html/CSS
JavaScript