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?

add demo like(JS Fiddle) so i can reproduce what is actual problem. — Lalji Tadhani, Jul 19 '18 at 12:29
As @LaljiTadhani mentioned, please edit your question to provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) as currently we do not have enough information to really help you. That being said, [I created a test](https://codepen.io/AustenHolland/pen/f37012240d5509f3bceb75d9143c07f9) using the code you did provide, and I am unable to see the issue you are experiencing. — Austen Holland, Jul 19 '18 at 17:48
Thanks I am working on a demo with JS Fiddle (never used it before) but it does not seem to like using timers — Andrew W. Phillips, Jul 23 '18 at 05:44
Finally got timer to work in JSFiddle (using jQuery ready() function) but it does not demonstrate the problem - see https://jsfiddle.net/109nwLub/36/ It must be something to do with using Vue (v-for) to generate my scrollable table. I'll try to get something to demonstrate the problem in JSFiddle but it is not easy. — Andrew W. Phillips, Jul 23 '18 at 06:52
Can't you store that value in some variable and let vue handle rendering? It's not recommended to directly manipulate DOM when using modern libraries. — barbsan, Jul 23 '18 at 13:21
@AndrewW.Phillips An example which includes Vue code would be helpful. I tried your current Fiddle and scrolling/dragging the scrollbar works fine for me on Chrome (58 on Linux). — Kay, Jul 25 '18 at 12:08
If you want to provide an example using vue on JSFiddle [this fiddle](https://jsfiddle.net/chrisvfritz/50wL7mdz/) is a good starting point — Braca, Jul 25 '18 at 21:48

Zakaria Acharki · Answer 1 · 2018-07-26T06:47:33.347

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:

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.

score 0 · Accepted Answer · answered Jul 24 '18 at 14:18

Probably not the answer you want to hear but I had this problem several months ago, there are several known bugs with the smooth scrolling feature of chrome when javascript is updating the DOM.

The newer versions of Chrome seem to handle this much better. I did a quick test where the code is similar to yours on the latest version of Chrome, and there were no problems.

It seems unlikely that there is an error in your code if it is working well in other browsers. Might be best suggesting users to ensure Chrome is fully updated for the best experience on the website or to use another browser.

Thanks. I worked out that it only happens for a table that is filled in using Vue.js. When I remove Vue it's OK. Also I am using the latest Chrome. It appears that I am doing something with Vue that affects Chrome but not Opera and FireFox. (However, Edge seems to have this and other worse problems.) — Andrew W. Phillips, Jul 26 '18 at 05:00

score 0 · Answer 3 · answered Aug 21 '18 at 07:43

0

Seems to be OK now - after release of Chrome 68.0.3440

answered Aug 21 '18 at 07:43

Andrew W. Phillips

3,254
1
21
24

Setting HTM5 text kills scrollbar drag in Chrome

3 Answers3