Clever Geek Handbook

Why doesn't resizing work when the scrollbar appears or disappears?

When the vertical browser scrollbar appears or disappears, the viewport or browser width changes (can be checked with jQuery's $ (window) .width () method), but the window resize event is not fired. Why?

+3


source to share


3 answers


Resize is an event that is determined by the actual size of the browser window.

What if I removed items from my page until my content fits on the screen? This is not a window size. Or if I changed the page overflow to hidden. The scrollbars will disappear, but again it is not the edge size.



What I get is this: The visibility of the scrollbar does not necessarily mean that an oversize event has occurred.

+2


source


Use the overflowchanged event instead of resizing.



0


source


Browsers don't recognize it as a resize. Then, if you need "scrolls" and "scroll bars" disappeared, use this code:

<div id="footerDiv" style="float: left; height: 1px; width: 100%;"></div>



bodywidth = 0;

$(document).ready(function () {

    bodywidth = $("#footerDiv").width();
    setInterval(scrollbarHelper, 100);

});

function scrollbarHelper() { 

    var newwidth = $("#footerDiv").width();

    if (bodywidth !== newwidth) {

        if (bodywidth > newwidth) {
            alert("Scrollbar Appeared");
            // Your code here
        }
        else if (bodywidth < newwidth) {
            alert("Scrollbar Disppeared");
            // Your code here
        }

        bodywidth = newwidth;
    }
}
-1


source






More articles:


All Articles