【问题标题】:How to get max scroll height in jScrollPane?如何在 jScrollPane 中获取最大滚动高度?
【发布时间】:2010-12-03 19:10:57
【问题描述】:

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();
            }

【问题讨论】:

    标签: javascript jquery ajax jquery-plugins jscrollpane


    【解决方案1】:

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

    要运行模拟,您可以尝试克隆原始对象,然后在内存中对其进行修改。请参阅http://api.jquery.com/clone/ 了解更多信息。例如:

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

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

    【讨论】:

    • 有趣的想法。不过,我将如何模拟 scrollToBottom(),有什么想法吗?
    • 我可以想到两种方法:第一种是在内存中创建一个与页面上的真实对象具有相同属性的 Javascript 副本,然后在其上运行命令。第二种方法是存储当前滚动位置,针对活动对象运行命令,然后恢复之前的滚动位置。这可能会导致 UI 跳转,因此您必须对其进行测试以查看它是否可用。
    • 我可以做的第二个,但我同意它可能会导致 UI 跳转。您能否使用创建内存对象的代码示例更新您的答案?
    • 查看我的编辑。我以前没有使用过 jScrollPane,但我希望您会克隆 #chatPane 元素并从那里构建。
    • 嗯,我尝试克隆它,但我一定是做错了。当我尝试第二种方式时,没有明显的跳跃。如果您实际上可以提供如何克隆的示例,那么我可能会这样做。只是以前从未使用过 .clone()。
    【解决方案2】:

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

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

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

    从长远来看,如果您可以添加功能请求以向 API 添加一些其他方法,那就太好了:isAtTopisAtBottomisAtLeftisAtRight - 如果您将其添加到 @987654322 @然后有机会我会加的。

    【讨论】:

    • 这更有意义并且不是那么“hacky”。我将为这个事件添加一个监听器。另外,我会按照您的要求将问题添加到 github,因为这些属性将是插件的重要补充。
    • 看起来我在这个问题上抢了先机。这听起来很完美,但事实并非如此。这是非常错误的。每次您附加该事件触发的容器时。我已经尝试了各种方法,但 isAtBottom 属性似乎不是很可靠。看来我将不得不坚持使用黑客。无论如何,它的代码要少得多。不过谢谢!
    • 抱歉 - 看起来参数在文档中的顺序错误! isAtBottom 是第四个参数。请看这个工作示例 - 当您滚动到底部时,它会粘在底部:jsfiddle.net/vitch/NDFy6
    猜你喜欢
    • 2012-12-07
    • 1970-01-01
    • 2017-03-07
    • 2012-04-24
    • 2013-05-28
    • 1970-01-01
    • 2018-07-22
    • 2023-03-16
    • 1970-01-01
    相关资源
    最近更新 更多