设置浏览器滚动条的拇指位置

Question

I've been working on a site that combines anchored scrolling with the normal scrolling, and so I've decided to have a part with a hidden scrollbar, and past a certain point have it be revealed. While I've managed to do this, the thumb of the scrollbar is not in the very top, as I'd like to, since of course the user has scrolled down.

Although, I know for certain this is possible as seen here , but checking out the javascript & css I don't really see how he's doing it.

Thus I've come down to 2 options, one being hiding the scrollbar altogether and replacing it with a custom-made one, and the other one being having the anchored scroll section in fact be right over the normal scroll section and simply move away through some javascript animation (Might be hard to understand what I mean, but basically if you check out the link above it'll make more sense).

Hope anyone can help give some insight on the matter!

Answer 1

When the page scrolls the body changes from

overflow: hidden;

to

overflow: auto;

overflow: hidden is the reason the scrollbar is hidden. You can use Javascript to detect scroll, or page position, and then make this style change to the body. There are also many scrolling plugins that will help you achieve this or similar.