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