CODEWITHSUNDEEP
javascriptjquery
photocode
photocode

Reputation: 750

Scrollbar detection with javascript

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%"});


  });
  });

Upvotes: 0

Views: 476

Answers (3)

Gromo
Gromo

Reputation: 1609

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.

Upvotes: 0

Maksim Chemerisuk
Maksim Chemerisuk

Reputation: 46

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

Upvotes: 0

user1467267
user1467267

Reputation:

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();
    });
});

Upvotes: 1

Related Questions