如何获取 jScrollPane 中的最大滚动高度?

发布于 2024-10-06 02:33:47 字数 1771 浏览 4 评论 0原文

jScrollPane 是一个很棒的 jQuery 插件,可以修改默认的浏览器滚动条。我正在开发一个将使用 jScrollPane 的聊天应用程序。到目前为止,除了我无法确定最大滚动高度之外,它的效果很好。这就是我想要做的:

$(function ()
{
    $('#chatPane').jScrollPane();
    var api = $('#chatPane').data('jsp');
    setInterval(function ()
    {
        $.ajax(
        {
            url: "Home/GetMessage",
            type: "POST",
            success: function (response)
            {
                // This next line is where the issue occurs. I need to check if the current scroll position is equal to the max scroll position. This is to implement the auto scroll if the user has scrolled to the bottom of the chat.
                var atBottom = (api.getContentPane().getContentPositionY() == api.getContentPane().getMaxScrollHeight()??????);
                api.getContentPane().append(response);
                api.reinitialise();
                if (atBottom)
                    api.scrollToBottom();
            },
            error: function (xhr, textStatus, errorThrown)
            {
                alert(textStatus);
            }
        });
    }, 1000);
});

getMaxScrollHeight 不存在。我需要某种方法来确定最大滚动高度。

编辑

我让它与 ajax 成功函数的以下更改一起工作。但我愿意接受一种比滚动到底部、获取当前位置,然后滚动回到上一个位置更好的方法。

            success: function (response)
            {
                var currentPosition = api.getContentPositionY();
                api.scrollToBottom();
                var maxPosition = api.getContentPositionY();
                api.scrollToY(currentPosition);
                var atBottom = (currentPosition == maxPosition);
                api.getContentPane().append(response);
                api.reinitialise();
                if (atBottom)
                    api.scrollToBottom();
            }

jScrollPane is an awesome jQuery plugin that modifies the default browser scroll bars. I am developing a chat application that will use jScrollPane. It works great so far except for the fact that I cannot determine the max scroll height. Here is what I'm trying to do:

$(function ()
{
    $('#chatPane').jScrollPane();
    var api = $('#chatPane').data('jsp');
    setInterval(function ()
    {
        $.ajax(
        {
            url: "Home/GetMessage",
            type: "POST",
            success: function (response)
            {
                // This next line is where the issue occurs. I need to check if the current scroll position is equal to the max scroll position. This is to implement the auto scroll if the user has scrolled to the bottom of the chat.
                var atBottom = (api.getContentPane().getContentPositionY() == api.getContentPane().getMaxScrollHeight()??????);
                api.getContentPane().append(response);
                api.reinitialise();
                if (atBottom)
                    api.scrollToBottom();
            },
            error: function (xhr, textStatus, errorThrown)
            {
                alert(textStatus);
            }
        });
    }, 1000);
});

getMaxScrollHeight does not exist. I need some way to determine the max scroll height.

Edit

I got it to work with the following changes to the ajax success function. But I'd be open to a better way than scrolling to bottom, getting current position, then scrolling back to previous position.

            success: function (response)
            {
                var currentPosition = api.getContentPositionY();
                api.scrollToBottom();
                var maxPosition = api.getContentPositionY();
                api.scrollToY(currentPosition);
                var atBottom = (currentPosition == maxPosition);
                api.getContentPane().append(response);
                api.reinitialise();
                if (atBottom)
                    api.scrollToBottom();
            }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

鹤舞 2024-10-13 02:33:47

您可以尝试的一种解决方案是模拟 scrollToBottom(),然后将生成的 getContentPositionY() 与模拟之前的值进行比较。如果它没有改变,那么用户已经在底部,所以在附加响应内容后“真正”调用 scrollToBottom()

要运行模拟,您可以尝试克隆原始对象,然后在内存中修改它。有关详细信息,请参阅 http://api.jquery.com/clone/。例如:

var simulatedPane = $('#chatPane').clone();
simulatedPane.jScrollPane();
var simulatedApi = simulatedPane.data('jsp');

然后,在 success() 函数中,使用 simulatedApi 进行模拟。

One solution you could try is to simulate a scrollToBottom() and then compare the resulting getContentPositionY() with the value before the simulation. If it hasn't changed, then the user was already at the bottom, so call scrollToBottom() "for real" after appending the response content.

To run the simulation, you might try cloning the original object and then modifying it in memory. See http://api.jquery.com/clone/ for more info. For example:

var simulatedPane = $('#chatPane').clone();
simulatedPane.jScrollPane();
var simulatedApi = simulatedPane.data('jsp');

Then, in the success() function, use simulatedApi for the simulation.

不语却知心 2024-10-13 02:33:47

我看到你已经有解决方案了。另一种方法可能是为 jsp-scroll-y 事件添加侦听器:

http ://jscrollpane.kelvinluck.com/events.html

此侦听器获取传递的 isAtTop 和 isAtBottom 布尔值。您可以将其存储在变量中,并在重新初始化滚动窗格之前检查变量的状态。

从长远来看,如果您可以添加功能请求以向 API 添加一些其他方法,那就太好了:isAtTopisAtBottomisAtLeftisAtRight - 如果您将其添加到 github 问题列表,那么我会当我有机会时添加它。

I see you already have a solution. Another approach might be to add a listener for the jsp-scroll-y event:

http://jscrollpane.kelvinluck.com/events.html

This listener gets passed boolean values for isAtTop and isAtBottom. You could store this in a variable and check the state of the variable before reinitialising the scrollpane.

Longer term, it would be great if you could add a feature request to add some additional methods to the API: isAtTop, isAtBottom, isAtLeft and isAtRight - if you add that to the github issues list then I will add it when I get a chance.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文