聊天脚本中DIV如何滚动？

Question

我写了一个聊天脚本，问题出在滚动 DIV 层上。我下载了几个聊天脚本，并经过仔细观察发现以下问题。

每当添加一行新的聊天时，滚动条不会在聊天行添加后自动向下滚动。它将其添加到 DIV 层底部，因为滚动条在进行此操作时不会产生任何干扰。

我做了什么：

以前我使用 JavaScript 滚动每个固定时间间隔。这样做，我无法手动向上滚动以查看过去的行（由于间隔刷新滚动条移动到设置位置）。后来，我编写了一个可以在 OnClientClick 中滚动的 JavaScript，但是这样做只能在 Chat 发送方面滚动下来，但不能在 Chat 接收方面在添加新的聊天行时滚动下来。

我下载了许多聊天脚本，并检查了如何管理特定问题，但我找不到任何解决方法。我很确定它是 jQuery 的工作（不确定），有人可以告诉我如何解决这个问题吗？

如果您无法理解我的问题，则很抱歉，因为我无法比以上更详细地解释。但是，如果需要，我可以提供更多信息。

我正在使用的语言是 ASP.NET、AJAX 更新面板、定时器滴答声用于使用新值更新 div，至今仅使用 JavaScript 将元素向下滚动。

- Mad coder.

---

请查看以下链接：http://stackoverflow.com/questions/7666649/auto-scroll-to-the-bottom-of-a-div - Prusse

可能是重复的问题：如何滚动到 div 底部？ - Dan Dascalescu

Answer 1

你的聊天“屏幕”应该是这样的：

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

将overflow-y: auto应用于聊天界面，并保留包装器不变。创建一个函数，在一定时间间隔内运行，根据$('#chat').scrollTop()方法返回的值，向聊天“屏幕”添加或删除“atBottom”类。

    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/

- benastan

---

谢谢老兄，这对我有用。再次感谢。你解开了我几个月的疑惑。 - Mad coder.

但是，伙计，有没有一种使用JavaScript实现相同功能的方法？ - Mad coder.

不使用jQuery是指？ - benastan

是的！不使用jQuery也是可能的吗？我能实现相同的功能吗？ - Mad coder.

是的，这是可能的（在JavaScript中可以做任何jQuery所做的事情，因为jQuery是JavaScript的子集，用JavaScript编写）。然而，某些jQuery功能——事件处理、jQuery.scrollTop()和jQuery.trigger()方法等——使得使用jQuery实现此类效果更加容易。 - benastan