Setting HTM5 text kills scrollbar drag in Chrome

Question

I have a timer in Javascript that fires once per second to update some text in the page (HTML5) like this:

document.getElementById('CountDown').innerHTML = "some string";

This works fine except that if this code runs while the user is dragging a scrollbar handle the drag is aborted. This is a very annoying user interface behavior which I have not been able to resolve.

If I comment out the line in the timer event then the scrollbar works normally.

Note: It only happens on Chrome, not on Firefox or Opera.

Any idea how to address this?

Answer 1

The smooth scrolling is a very important and effective function to enhance the user experience, it looks like there are several cases like yours concerning the smooth scroll in the chrome browser, and how it's not working properly, but the issues are in must of time related with the older version, like:

1. https://github.com/simov/simplr-smoothscroll/issues/27
2. https://github.com/mathiasbynens/jquery-smooth-scrolling/issues/1
3. https://github.com/iamdustan/smoothscroll/issues/28

You could try the following rules in your CSS:

html, body { 
    overflow: hidden, 
    height: 100% 
}

And for your container you could attach the following rules:

{ 
    overflow: auto; 
    height: 100% 
}

Instead, since the code work in the other browser means that your code is valid, so just make sure you're using one of the latest versions, clear your cache & give it a try.