search

wikipendium / wikipendium.no

Compendiums edited as a wiki.
https://www.wikipendium.no
Apache License 2.0
36 stars 5 forks source link

Funky scrolling behavior #375

Open iver56 opened 9 years ago

iver56 commented 9 years ago

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

iver56 commented 9 years ago

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.

cristeahub commented 9 years ago

I can't reproduce this, to my knowledge it was fixed in https://github.com/stianjensen/wikipendium.no/pull/338 . I guess it's a Windows problem, can you verify this @sigvef ?

stianjensen commented 9 years ago

I have seen the issue occur once for me (after #338 – the issue was also introduced with #338), but not been able to reproduce it since.

stianjensen commented 9 years ago

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.

iver56 commented 9 years ago

Looks good. It's worth a try :+1:

cristeahub commented 9 years ago

That one doesn't seem to work for me, I don't see any difference when toggling it at least.

iver56 commented 8 years ago

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);