Hide scrollbar in IE

前端 未结 7 1422
猫巷女王i
猫巷女王i 2020-12-24 05:24

In our application for UI we are using JSF or Prime faces for that. We would like to hide the scrollbar for our application, but we are struggling to achieve this in Interne

相关标签:
7条回答
  • 2020-12-24 05:51

    In case of anyone still needs a solution, this one worked for me:

    .container{
        -ms-overflow-style: none;
        overflow: auto;
    }
    

    This change allows scroll on the container and hides the bars on IE.

    If on the other hand you want to hide it and show it again once the user scroll again you can use.

    .container {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    

    In case you want to hide it completely (the scrollbar) not only from a specific container you can use:

        body::-webkit-scrollbar { display: none;  }
    

    Tested on IE 10 && 11.

    Reference

    0 讨论(0)
  • 2020-12-24 05:55

    Hard to say without seeing the code! Saying that, You could try use using the "Extended Attributes" that Microsoft introduced for Internet Explorer.

    <body scroll="no">
    

    EDIT:

    You could also try setting the overflow property of the html page in CSS like so.

    html, body { overflow: hidden; }
    
    0 讨论(0)
  • 2020-12-24 05:57

    Make sure IE is not in compatibility mode before you beat yourself up while trying overflow:hidden;

    0 讨论(0)
  • 2020-12-24 06:01

    I cannot provide plain CSS solution, but if you use jQuery, it is easy to set the computed width and height to the body this way:

    $("body").css({"width": body.width()+"px", "height": body.height()+"px"})
    

    and then

    $("body").css({"overflow": "hidden"});
    

    worked also in IE (at least in IE9+). My goal was to make page not scrollable temporarily (when custom dialog with own scrolling capability was shown). And when custom dialog was closed, I reset the body style attribute to its previous state (to remove the computed body width and height).

    0 讨论(0)
  • 2020-12-24 06:04

    This CSS works for me both in Chrome and IE 10:

    /* Oculta la scroll-bar pero sigue permitiendo hacer scroll con el mouse */
        body::-webkit-scrollbar { display: none;  }
        html, body { -ms-overflow-style: none; overflow: auto; }
    
    0 讨论(0)
  • 2020-12-24 06:06

    use

    .classname {
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    

    This automatically hides the scollbar but shows it again when scrolling

    https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style

    0 讨论(0)
提交回复
热议问题