我编写了一个聊天脚本,所有问题都是滚动DIV层.我下载了几个聊天脚本,仔细观察后发现了下面的内容.
当添加新的聊天行时,添加聊天行后滚动条不会向下滚动.它作为滚动添加到DIV层的底部,在制作时不会产生任何干扰.
我做了什么：
之前我使用javascript向下滚动每个固定的间隔.这样做我无法手动向上滚动查看过去的行(由于间隔刷新滚动条移动到设置位置).后来我编写了一个可以向下滚动OnClientClick的javascript,但这样做我只能向下滚动聊天发送方,但是当添加新的聊天行时,它无法在聊天接收方向下滚动.
我下载了很多聊天脚本,并检查了如何管理这个特定问题,但我找不到任何解决方案.我相信它的jQuery工作(不确定)任何人都可以告诉我如何解决这个问题？
如果你不理解我的问题,我很抱歉,因为我无法比上面更详细地解释它.但是我可以根据要求提供更多信息.
我使用的语言是ASP.NET,AJAX更新面板,用新值更新div的计时器刻度,javascripts直到现在才用于向下滚动元素.
最佳答案
你的聊天’屏幕’应如下所示：
在聊天中放置overflow-y：auto,但保留包装器.创建一个以一定间隔运行的函数,并根据$(‘#chat’)返回的值将“atBottom”添加或删除到聊天’screen’.scrollTop()方法.
monitor = function() {
var $this = $(this),wrap = $this.find('.wrapper'),height = $this.height(),maxScroll = wrap.height() - height,top = $this.scrollTop();
if (maxScroll === top) {
$this.addClass('atBottom');
} else {
$this.removeClass('atBottom');
}
}
window.setInterval(function() {
monitor.call($('#chat').get(0));
},350);
然后你需要绑定一个像这样工作的事件’addMessage’：
$('#chat').bind('addMessage',function(e,message) {
var $this = $(this),// store whether it's at the bottom before appending the message
scroll = $this.hasClass('atBottom');
// then append the message
$this.find('.wrapper').append(message);
if (scroll) {
// measure the new maxScroll and scroll to it.
var wrap = $this.find('.wrapper'),maxScroll = wrap.height() - height
$this.scrollTop(maxScroll);
}
})
$('button').click(function() {
$('#chat').trigger('addMessage','asdgagasdg
这是一个例子：
http://jsfiddle.net/WVLE2/
原文链接：https://www.f2er.com/js/429506.html