Find max scrolling an element has

Question

I am implementing my own horizontal scrolling with controls (left/right) How can I find how much scrolling I got to the right?

My code is as follows:

$scope.scrollFilters = function(dir) {
    var leftPos = $('.filters').scrollLeft();
    var containerWidth = $('.filters').width();
    var scrollTo = 0;
    if (dir == 'right') {
        scrollTo = leftPos + scrolled >= containerWidth ? containerWidth : leftPos + scrolled;
    } else {
        scrollTo = leftPos - scrolled <= 0 ? 0 : leftPos - scrolled;
    }

    $('.filters').animate({
        scrollLeft: scrollTo
    });
};

What I'm interested in is getting the actual $('.filters').width(). At the moment it would just return the width I set up in the CSS, I want to get the actual width if I wouldn't limit the div in width.

P.S. its an AngularJS application, but don't think it does me any good this time.

Thanks for the help!

score 0 · Answer 1 · answered May 14 '15 at 12:58

0

you should try and grab its max width

var theWidth = Math.max.apply(null, $(".filters").map(function() {
  return $(this).outerWidth(true);
}).get());

answered May 14 '15 at 12:58

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

If there is scroll, it means that an inner element is bigger than an outer element, so you should calculate the difference between the inner width (bigger) and the outer width (smaller) or their heights.

This may help you as you have to apply the same concept: How to get maximum document scrolltop value

edited May 23 '17 at 11:50

Community

1
1

answered May 14 '15 at 12:59

Vandervals

5,774
6
48
94

Find max scrolling an element has

2 Answers2