我要实现一段文字滚屏从下到上,滚到最后一行时,不动,如果下面加了一行文字,又向上滚动一行。内容是实时更新的。
如 。我有这么一段文字:
1111111111
2222222222
3333333332
4444444444
5555555555
6666666666
从底部向上滚动,滚到6666666666出现的时候就停止滚动。如果下面新增了一行777777777,就向上滚一行。
如 。我有这么一段文字:
1111111111
2222222222
3333333332
4444444444
5555555555
6666666666
从底部向上滚动,滚到6666666666出现的时候就停止滚动。如果下面新增了一行777777777,就向上滚一行。
再用个计数器记录上次循环到最后一条时的位置,继续从这个位置往后显示
scrolltop=scrollheight就行了。如果内容更新你能控制,那么就在内容更新地语句后面加上这一句。这样是最好的,消耗资源比较少。如果内容更新的地方你不能控制,那就用一个interval不断设置就行了。不过用interval有一个缺点,就是用户如果手动滚到上面的时候,代码又把他滚到下面,显得非常不友好。
代码如下,楼主根据需要,把两个注释掉的语句用其一就可以了。<div id="infodiv" style="border:1px solid red;height:400px;overflow:scroll;"></div>
<input id="text1" /><input type="button" id="btnsend" value="send" onclick="sendmsg()" /> function sendmsg() {
if (document.getElementById("text1").value != "") {
document.getElementById("infodiv").innerHTML += "<br/>+ " + new Date().toString() + " " + document.getElementById("text1").value;
//document.getElementById("infodiv").scrollTop = document.getElementById("infodiv").scrollHeight;
}
}
// window.setInterval('document.getElementById("infodiv").scrollTop = document.getElementById("infodiv").scrollHeight',1000);
<div id="innertext" style="position: absolute">
<span>123</span>
<span>321</span>
</div></div><script>
var innerText = document.getElementById( 'innertext' ),
text = document.getElementById( 'textdiv' ).getElementsByTagName( 'span' ),
height = innerText.offsetHeight - text[ text.length - 1 ].offsetHeight innerText.style.top = height;
</script>大概这样吧 滚动自己做一下