Vertical scroll bars in IE 10 11

Question

I have a website that uses vertical scroll bars on the viewport. www.LinkforCare.org

The scroll bars work fine in Chrome, FF, and IE 9. But not in IE 10 or 11. Mouse wheel scrolling works OK, but not dragging the scroll bar.

The site uses Bootstrap and jQuery-ui, if that may be relevant.

Anyone aware of this issue, and a solution?

Answer 1

Remove the overflow-y: scroll; from the following code.

HTML:

<style type="text/css">
       html, body
        {
            height: 100%;
            min-height: 100%;
            overflow-y: scroll;
            overflow: auto;
            border-top: 0px;
        }
</style>

It will end up looking like this.

HTML:

<style type="text/css">
       html, body
        {
            height: 100%;
            min-height: 100%;
            overflow: auto;
            border-top: 0px;
        }
</style>

You can also test this by browsing to the site using IE11, right-clicking on any of the blank blue space on the left or right and selecting 'Inspect Element'. Deselect the overflow-y: scroll from the style and then trying the scrollbar.

Answer 2

Due to a few conflicting rules you have two overlapping scrollbars (one for html, and the other for the body element) preventing the user from click-dragging on the one that matters most. The quick solution is to simply remove the overflow-y property from your index file, line 25:

This behavior is a bit buggy though, and as a result I will be filing an issue on it internally and having our team take a look.