If you decide to use a second scrollbar:
1. Consider using Excel style sticky headers and sticky left columns to give users column and row headings. Here’s a proof of concept: https://output.jsbin.com/qiqozum (sorry my example isn’t larger than viewport like your example, but it can be made to work with a large scrollable body on a smaller screen).
2. You can make the second scrollbar position:sticky so that it sticks to the bottom of the viewport (I think your idea of putting it at top would confuse users)
3. You can measure the “thickness” T of a scrollbar by looking at the difference between content height and container height for a div with a forced scrollbar at bottom.
4. I think you can get the second scrollbar to hide using CSS when the real scrollbar comes into view. You could use a container div with overflow:hidden and a negative margin at the bottom of height T, and put the scrollable div within, with an extra margin at the bottom of of it if T. Put the position:sticky scrollbar inside the container div. Edit: IGNORE this bullet point - it’s only relevant for small scrollable area, not whole body viewport.
5. You now run into the problem where the user doesn’t know they can scroll vertically to see more. Perhaps add an extra 20px of transparency below the sticky scrollbar, perhaps a little dark opacity, so user can see scrollbar is floating and that there is more data.
Things to watch for:
1. NEVER use the fake scrollbar as a 100% replacement for a real scrollbar... they are janky (JavaScript cannot provide smooth scrolling) and there are many many ways for the scrollbar to not show properly and screw the user over.
2. Scrollbar thicknesses can change dynamically. You can detect this as an event, but it isn’t necessarily simple.
3. Page zooming can cause troubles. Pinch zooming can cause troubles - needs lots of testing on touch laptops or Windows tablets.
4. Only Chrome, Safari and Firefox engines. Microsoft Edge before Chrome transplant is your enemy - nothing will work right. You can get everything above to work well in IE11 including jankfree sticky column and row headers, by using JavaScript, but it takes tricks that are not well known.
5. Test in Safari on Mac by switching on scrollbars in preferences.
6. Take a lot of care to ensure the second scrollbar never occludes the real scrollbar (bottom or right) - there is a risk the user can no longer scroll.
7. I haven’t had much experience using a fake scrollbar to scroll the viewport as needed by your example. I am fairly sure I am missing a couple of difficulties because my experience is mostly for scrollable elements rather than a scrollable body, and I know there are some troublesome differences between the two.
8. Keeping the scrollbar synchronised to content is not always as easy as you might think. Use non-blocking onscroll event so jank is not introduced.