Funky scrolling behavior
Opened this issue · 7 comments
When scrolling down in a large TOC and the scroll position, and I reach the bottom of the TOC, Chrome decides it should start scrolling in the main (parent?) view, i.e. the document itself. When that happens, a new item in the TOC is highlighted, so that the scrolling position of the TOC jumps up to show that item. This makes it hard to see what's on the bottom of the TOC.
See this video if you don't understand what I mean:
http://iver.io/stuff/WP_20150601_001.mp4
How about delaying TocElement.scrollIntoView() until one second after the last scroll event in the main view? When a scrolling event in the main view occurs, do setTimeout and if a new scrolling event comes within one second, do clearTimeout.
It's also maybe possible to keep scroll events from bubbling to the parent, but it looks like that requires some nasty JS http://stackoverflow.com/a/16324762/2319697
A third option is to avoid calling scrollIntoView() on TOC items in case you have scrolled manually inside the TOC during the last 10 seconds or so. I would go for this option.
We could try this plugin, and see if it works better to prevent toc scrolling from affecting main view scrolling:
http://mohammadyounes.github.io/jquery-scrollLock/
I think this way of solving the problem is most appropriate, rather than using timeouts which rely on magic numbers.
Looks good. It's worth a try 👍
That one doesn't seem to work for me, I don't see any difference when toggling it at least.
This plugin could solve the problem. It has wheelPropagation: false as default
https://github.com/noraesae/perfect-scrollbar
I don't know if Element.scrollIntoView() works with that plugin, but this works for sure:
container.scrollTop = yOffsetGoesHere;
Ps.update(container);