Question

I have an instant chat program I’ve created with HTML5/CSS, Asynch. Javascript and PHP. I have an interval that is constantly checking the user’s chat box div is scrolled to the bottom for user convenience. This became a problem when a user wished to scroll up to view previous messages so I tried the onscroll event to stop the interval. I couldn’t get this to work and so have gone the longer way around by using the onmouseover and onmouseout events to start and stop the interval.

This works perfectly fine for desktop computers as they have a visible mouse. For mobile devices however, such as my Windows phone – which the program is primarily designed for, there is an issue as you first have to tap the message box (presumably to first move the invisible mobile mouse over the chat box) and then scroll with the finger movement to scroll unaffected.

This isn’t a major problem as I could inform mobile users to first tap then scroll, but I feel that successfully using the onscroll event would match the usability with desktop users.

Are there known issues with the onscroll event? I dare say I’m familiar with JS events and can use them appropriately, but this is the only event I haven’t managed to get to work, in FF or IE.

Any thoughts or help would be appreciated,
Lee.

Here are the current events that manage the scrollcheck on/off, where ScrollCheck() is the function that checks the scroll position and moves it if not at the bottom and scrollInterval is the global var that holds the id of the interval.

document.getElementById('messages').onmouseover = function()
{
    clearInterval(scrollInterval);
}

document.getElementById('messages').onmouseout = function()
{
    scrollInterval = setInterval(ScrollCheck, 300);
}

I simply replaced the onmouseover event to onscroll without any luck.

Answer 1

When I make a chat page, I only check the scroll when new messages are added:

var currentScroll = elem.scrollTop, oldmaxScroll = elem.scrollHeight-elem.clientHeight;
// add new message(s) here
var newmaxScroll = elem.scrollHeight-elem.clientHeight;
if( currentScroll == oldmaxScroll) elem.scrollTop = newmaxScroll;