Scrollbar detection with javascript

Question

A while back I found the following script on stackoverflow and it seems to work well... for initial page load, but I need to somehow make this more responsive. I need it to somehow fire when the browser changes size and when a div appears after the page is loaded. Basically "live" and firing all the time when needed. I've tried tweaking it but always fail. I also need it for two different target divs. Any tips greatly appreciated :)

    (function($) {
$.fn.has_scrollbar = function() {
    var divnode = this.get(0);
    if(divnode.scrollHeight > divnode.clientHeight)
        return true;
 }
 })(jQuery);

 example:

if($('#scrollable').has_scrollbar()) { $("#scrollable").css({"width":"97%"}); 

}

UPDATE:

This is pretty close to working, I need a way to undo the width adjustment if the scrollbar disappears. Would an if / else statement do that, or I need a new function to detect no presence of scrollbar and then run a new document.ready wrapper saying #xxx width 100%?

    function bindHasScrollbar() {
    (function($) {
    $.fn.has_scrollbar = function() {
    var divnode = this.get(0);
    if(divnode.scrollHeight > divnode.clientHeight)
        return true;
    }
    })(jQuery);
    }


   $(document).ready(function() {

   // Initial

bindHasScrollbar();
$("#story").css({"width":"97%"});
$("#minigallery").css({"width":"97%"});

   // Refresh
  $(window).resize(function() {


    bindHasScrollbar();
$("#story").css({"width":"97%"});
$("#minigallery").css({"width":"97%"});


  });
  });

You can detect window resizing with `window.onresize`. For DOM changes see both answers of this question: http://stackoverflow.com/questions/9470931/is-there-any-on-dom-change-event — Reeno, Mar 15 '14 at 21:58

score 1 · Answer 1 · answered Mar 15 '14 at 22:53

1

It's mostly easiest to make a wrapper so you can dynamically rebind your function. I can't test at this moment, but the idea is correct:

function bindHasScrollbar() {
    (function($) {
        $.fn.has_scrollbar = function() {
        var divnode = this.get(0);
        if(divnode.scrollHeight > divnode.clientHeight)
            return true;
        }
    })(jQuery);
}


$(document).ready(function() {
    // Initial
    bindHasScrollbar();

    // Refresh
    $(window).resize(function() {
        bindHasScrollbar();
    });
});

answered Mar 15 '14 at 22:53

What's the result you are having and what is still not working like anticipate it? – Mar 16 '14 at 10:02
The initialization (.ready) - fires and the content width changes regardless of scroll bar presence, also, if the browser is adjusted and the scroll bar disappears, the formatting does not change back to the original settings (can we do an if / else statement?). I'm trying to maintain an even, center alignment for the content. I'm using mcustomscrollbar and when it turns on, it creates a ton of dead space between it and the content. Looks really bad with narrow width scrolling divs. – photocode Mar 16 '14 at 20:47

score 0 · Answer 2 · answered Mar 15 '14 at 23:00

0

I'd recommend to use live extensions to solve this kind of problem. Take a look at "Element Media Queries" section from the article.

answered Mar 15 '14 at 23:00

Maksim Chemerisuk

46
2

score 0 · Answer 3 · answered Mar 16 '14 at 13:11

Detecting scrollbar changes (changes in clientHeight/clientWidth vs scrollHeight/scrollWidth) is one of things that have no "direct" solution. There was solution that helps detecting container resize, but, imho, it's ugly.

The best crossbrowser solution is checking container size changes with setInterval every 300-500 ms. Using this way you should remember last height/width and recheck container scrollbar ony if height or width was changed, because function that run with this small interval should execute as less code as possible.

The better way is using MutationObserver for modern browsers (and interval for old ones). I didn't check this way yet, but I hope it will help me in my own tasks after I make research on it.

If you want only to hide vertical scrollbar - do not display it even if it's visible, you can use next technique: wrap container into another one with overflow:hidden, but without height/width, set inner container overflow-y:scroll to always show vertical scrollbar, and margin-right:-17px to make scrollbar to be out of parent container and scrollbar will be hidden. Please note, that scrollbar width may differ depending on browser you use, so you have to detect it somehow. But this is another question. Also, scrollbar width depends on zoom-level, which is less critical.

Scrollbar detection with javascript

3 Answers3