jQuery Function to Toggle Overflow Not working on Microsoft Edge

Question

I have written a jQuery function to toggle between overflow-y: hidden, and, overflow-y: auto upon pressing a button. This works great on Chrome, Opera and Firefox on desktops. But for some reason Microsoft Edge does not work which is rather strange since the rest of the browsers all worked without problem. Some help and explanation would be wonderful!

$(".pro-toggle").click(function(){
    var hidden = $('body').css('overflow');
    if(hidden == 'hidden'){
        $("body").css("overflow-y","auto");
    }
    else {
        $("body").css("overflow","hidden");
    }
});

<button class="navbar-toggle collapsed pro-toggle pull-left" data-toggle="collapse">
    <span class="icon-bar top-bar"></span>
    <span class="icon-bar middle-bar"></span>
    <span class="icon-bar bottom-bar"></span>    
</button>

keep looking at http://stackoverflow.com/questions/31552286/support-for-scroll-bar-styling-in-edge-browser problem would be solved soon — anshuVersatile, Nov 10 '16 at 12:08
Ok, this is quite interesting. Thank you for the find. It seems it is a not problem related to my code. — Lord Goderick, Nov 10 '16 at 12:21

score 0 · Answer 1 · edited May 23 '17 at 12:30

Please find Support for scroll bar styling in Edge Browser

It's hard to know specifically, without official documentation, clear indications, or official word from the dev team, but it seems unlikely based on previous comments about the purpose and design goals of Edge.

Here's why I say that:

The properties you're referring to were originally added to IE8 as extensions to the CSS 2.1 specification. These properties are non-standard and considered illegal in some circles. (There are other non-standard variations, though it's unclear whether they're supported in MS Edge.)

What is clear is that these particular properties may not be formally supported in Edge, presumably because they are proprietary extensions.

This seems unlikely to change, since one of the major design points of MS Edge is to set aside legacy compatibility in favor of standards and cross platform interoperability. (And, given that major functionality changes were made to IE11 without changing the major or minor version number, it's entirely feasible that support for non-standard properties may disappear after any given update.)

The fact that these properties work in the build you're using may be a deliberate design decision or it may be a side effect from the fact that Edge is based on a fork of the Trident engine, one where many lines of legacy code have been removed.

Again, without official confirmation or announcement, this is all speculation based on experience and previous team behavior. Your mileage may vary.

jQuery Function to Toggle Overflow Not working on Microsoft Edge

1 Answers1