Question

我为聊天脚本编码，所有问题都与滚动DIV层有关。我下载了几个聊天脚本，仔细观察后发现了以下内容。

当添加新的聊天行时，添加聊天行后滚动条不会向下滚动。其添加到DIV图层的底部为卷轴在制作时不会产生任何干扰。

我做了什么：

在我使用javascript向下滚动每个固定间隔之前。这样做我无法手动向上滚动查看过去的行（由于间隔刷新滚动条移动到设置位置）。后来我编写了一个可以向下滚动OnClientClick的javascript，但这样做我只能向下滚动Chat sender side但在添加新的聊天行时无法在Chat receiver side向下滚动。< / p>

我下载了很多聊天脚本并检查了如何管理这个特定问题，但我找不到任何解决方案。我猜想jQuery的工作（不确定）有没有人能告诉我如何解决这个问题？

如果您无法理解我的问题，我很抱歉，因为我无法更详细地解释它，而不是如上所述。但是我可以根据要求为您提供更多信息。

我使用的语言是ASP.NET，AJAX更新面板，用新值更新div的计时器刻度，javascripts到现在只用于向下滚动元素。

Answer 1

您的聊天'屏幕'应如下所示：

<div id="chat">
    <div class="wrapper">
        <!-- chat messages go here -->
    </div>
</div>

在聊天中放置overflow-y：auto，但保留包装器。创建按时间间隔运行的函数，并根据$（'＃chat'）返回的值将“atBottom”类添加或删除到聊天'屏幕'。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'),
                height = $this.height(),
                maxScroll = wrap.height() - height
            $this.scrollTop(maxScroll);
        }
    })
    $('button').click(function() {
        $('#chat').trigger('addMessage', 'asdgagasdg<br/>');
    });

这是一个例子： http://jsfiddle.net/WVLE2/

DIV如何在聊天脚本中滚动？

1 个答案: