Removing IE's scrollbar

Question

First of all, I don't want to just remove it, I want to ensure that there is still scrolling capabilities there also.

This is because I would like to have a 'slide show' affect on the website, where you can click 'next' and before, however with the scroll bar there, you can just go through it.

I have hidden the scrollbar in other browsers using:

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

for webkit browsers and overflow: -moz-scrollbars-none; for Firefox. However, when it comes to IE, I can't find anything to simply hide it.

I found these on the internet:

scrollbar-3dlight-color:;
scrollbar-arrow-color:;
scrollbar-base-color:;
scrollbar-darkshadow-color:;
scrollbar-face-color:;
scrollbar-highlight-color:;
scrollbar-shadow-color:;

I thought by changing the colour to transparent, it would disappear, but it did not (just reverts back to normal).

Is there a way I can simply hide the scrollbar (simply like display:none or something else), in IE? I am open to css and js options.

jsFiddle of problem

NOTE: Adding overflow:hidden; stops the page from going past the second div when clicking the a tag.

Answer 1

See here for fiddle using your current code

Try this trick

body, div, html{
    height:100%;
    width:100%;
    padding:0;
    margin:0;
}
body{
    overflow:hidden;
    position:fixed;
}
div{
    overflow-y:scroll;
    position:relative;
    right:-20px;
}

It offsets a scrollable div so its vertical scrollbar is outside the viewable area.

Answer 2

I have similar problem, I don't need scroll bars on main page, but i have to have inside of my page content like in div's and span's.

So I found solution like this:

body {
    -ms-overflow-style: none;
}
div, span {
    -ms-overflow-style: auto;
}