How can I prevent the scrollbar overlaying content in IE10?

The method to madness: Why this works

Tailoring responsive design

In a responsive web project, beware of @-ms-viewport { width: device-width; }. This little gem might lead your scrollbar to host a surprise overlay party with your content. Thus, opt for adaptable containers and media breakpoints.

Friends or foes: Bootstrap

Bootstrap can be a great friend, but sometimes, it can create hurdles in your scrollbar's aspiration of not overlaying content. Peek into responsive-utilities.less and find the potential culprit creating a ruckus with its @-ms-viewport setting.

Not all Internet Explorers are the same

IE10 scrollbar issues are important, but don't forget about its bigger sibling, IE11. Old is gold, so don't forget to refer to Microsoft's archived documentations for a quick understanding of possible compatibility issues.

For the love of custom fixes, here’s a tiny piece of JavaScript for detecting IE10/IE11:

if (navigator.userAgent.match(/Trident\/7\./)) {
  // Adding a class: it's like putting a bell on a cat, now we can hear it coming!
  document.body.classList.add('ie10');
}


Now go ahead, cater your website with custom styles for our beloved IE10/IE11.

Make Good Use of !important

If some naughty style tries to override your scrollbar setting, call in backup by tagging !important to -ms-overflow-style: scrollbar;.

Remember, with great power comes great responsibility! Use !important sparingly to avoid long term maintenance turmoil!

Responsive Tables: Bootstrap 4

Does Bootstrap 4 and responsive tables give you nightmares? Apply the .table-responsive-ie class, and let's take that stress off your shoulder:

.table-responsive-ie {
 // Making scrollbars great again!
  -ms-overflow-style: scrollbar;
}


For conditional class additions targeting Internet Explorer, don't shy away from jazzing things up with a bit of JavaScript.

Additionals: The icing on the cake!

Permanent vertical scrollbars

The overflow-y: scroll; property can become your best friend if you aim for permanent vertical scrollbars to prevent unforeseen layout changes:

.div-class {
  // Scroll bars. Forever. like that gym membership you got!
  overflow-y: scroll;
}


Scrollbar style for custom elements

Grant all your custom scrollable elements the -ms-overflow-style: scrollbar; gift. This little token will not disappoint and ensure they don't overlay content:

.custom-scroll {
  // Because being special doesn't mean being intrusive!
  -ms-overflow-style: scrollbar;
}
