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

Question

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.

Answer 1

Starting with your second question: scrollTop is the vertical position (in px) of the scrollbar, relative to the top position. So if your scrollbar is at the very top, scrollTop = 0. It's the same for scrollLeft, but horizontal. You can set these values via js to bring the scrollbar to a certain position programmatically. So, if you want to know when the scrollbar is on top, you simply register an event listener for scrolling and wait for scrollTop = 0. To check if the scrollbar is at the very bottom, you need a bit of calculation since you need to know the scroll height of the container (scroll height - scrollTop = 0).

See the following code (using jquery but it also works with plain js) which fires an event when the scrollbar reaches start or end position (this is for horizontal scrolling, so you have to replace "left" with "top" and "width" with "height"):

 $('#yourDivId').on('scroll', function () {
    if (scrollbarIsAtStart($(this))) {
        $(document).trigger("scrollbar.left");
    }
    if (scrollbarIsAtEnd(this, $(this))) {
        $(document).trigger("scrollbar.right");
    }
})

const scrollbarIsAtStart = (jQuery) => {
    if (jQuery.scrollLeft() == 0) {
        return true;
    }
    return false;
}

const scrollbarIsAtEnd = (e, jquery) => {
    //Minus one, probably rounding issue!?
    if (jquery.width() + jquery.scrollLeft() >= e.scrollWidth - 1) {
        return true;
    }
    return false;
}

So there are two events triggered, one for the scrollbar reaching start position, one for the end of the container. Now, you can listen to these events and handle them:

$(document)
    .on('scrollbar.left', {}, function (event) {
    //do whatever you want to do
})

Regarding your first question, I'm not a css expert, but if I look at bootstraps table-responsive class (which enables horizental scrolling), it looks like this:

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

Vertical scrolling is enabled by default if you define a fixed height on your div and the data exceeds this size. You can of course override the width with a fixed value or a different percentage.