How to obtain the left, right, top and bottom position of scroll in a div in HTML with Javascript

I would like to draw a <div> box with fixed height, width and scrollbars and register the location of the scrolled view. I have found the function scrollTop but don’t know how to get the bottom scroll location.

1. Which CSS do I need to draw the box with scrollbars?
2. How can I access the left, right, top and bottom position inside (relative to) the box with Javascript?

I would use these 4 numbers to draw a <div> inside.