CODEWITHSUNDEEP
javascriptjqueryajaxjquery-pluginsjscrollpane
ChevCast
ChevCast

Reputation: 59193

How to get max scroll height in jScrollPane?

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

Upvotes: 1

Views: 2864

Answers (2)

vitch
vitch

Reputation: 3214

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.

Upvotes: 1

ChessWhiz
ChessWhiz

Reputation: 4702

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.

Upvotes: 1

Related Questions