How can I determine the max scroll position in different browsers with different line-height and/or padding?

Question

Is there a way to determine the max scroll position for every browser, without actually scrolling to the end and reading this position?

Taken a container div with a fixed height and overflow. Several div elements in the container whose sum of heights is bigger then the height of the container.

There is a max scroll position (y) which I thought is simply the container-height minus the total items-height. This seems to be true until the line-height of the container is larger then the height of the items. If this is the case, it seems that every browser determines the max scroll position differently.

With padding it got even worse, some browsers add the top padding, some browsers add both top and bottom padding.

See this fiddle for example. Play around with the container line-height and the div.item height.

Answer 1

I only have the ability to test in a handful of browsers, but I think what you are looking for is:

elm.scrollHeight - elm.clientHeight

Shown in an updated jsFiddle.

Answer 2

Take a look at this How to find the HTML element Scrollable Height and width using JQuery ?, this shows how to get the scrollable height and width, and there is some related posts regarding element scroll how to check if the scrollbars are currently visible? and how to determine if the vertical and horizontal scrollbars reaches the edges?. and there are more FAQs available and i hope this will help you !.