求JS高手写个滚屏效果,该如何处理
日期：2014-05-16 浏览次数：20306 次
求JS高手写个滚屏效果
我要实现一段文字滚屏从下到上，滚到最后一行时，不动，如果下面加了一行文字，又向上滚动一行。内容是实时更新的。
如 。我有这么一段文字：
1111111111
2222222222
3333333332
4444444444
5555555555
6666666666
从底部向上滚动，滚到6666666666出现的时候就停止滚动。如果下面新增了一行777777777，就向上滚一行。
------解决方案--------------------
做成表格，显示时用DISPLAY控制，再通过AJAX每隔指定时间取后台数据替换现有数据
再用个计数器记录上次循环到最后一条时的位置，继续从这个位置往后显示
------解决方案--------------------
楼主需要的是类似聊天室或者网络文字直播那种显示屏的滚到页面底部的功能。其实这个很简单
scrolltop=scrollheight就行了。如果内容更新你能控制，那么就在内容更新地语句后面加上这一句。这样是最好的，消耗资源比较少。如果内容更新的地方你不能控制，那就用一个interval不断设置就行了。不过用interval有一个缺点，就是用户如果手动滚到上面的时候，代码又把他滚到下面，显得非常不友好。
代码如下，楼主根据需要，把两个注释掉的语句用其一就可以了。
我要实现一段文字滚屏从下到上，滚到最后一行时，不动，如果下面加了一行文字，又向上滚动一行。内容是实时更新的。
如 。我有这么一段文字：
1111111111
2222222222
3333333332
4444444444
5555555555
6666666666
从底部向上滚动，滚到6666666666出现的时候就停止滚动。如果下面新增了一行777777777，就向上滚一行。
------解决方案--------------------
做成表格，显示时用DISPLAY控制，再通过AJAX每隔指定时间取后台数据替换现有数据
再用个计数器记录上次循环到最后一条时的位置，继续从这个位置往后显示
------解决方案--------------------
楼主需要的是类似聊天室或者网络文字直播那种显示屏的滚到页面底部的功能。其实这个很简单
scrolltop=scrollheight就行了。如果内容更新你能控制，那么就在内容更新地语句后面加上这一句。这样是最好的，消耗资源比较少。如果内容更新的地方你不能控制，那就用一个interval不断设置就行了。不过用interval有一个缺点，就是用户如果手动滚到上面的时候，代码又把他滚到下面，显得非常不友好。
代码如下，楼主根据需要，把两个注释掉的语句用其一就可以了。
- HTML code
<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()" />
------解决方案--------------------
<div id="textdiv" style="position: relative">
<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>
大概这样吧 滚动自己做一下
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
