Preventing overscroll in Internet Explorer 11

Question

I have a site has a <div> on it that is vertically scrollable. That works well. I am also hiding the scrollbar, and that also works well. CSS is essentially

.scrollable {
  overflow-y: scroll;
  -ms-overflow-style: none;
}

I am currently having a problem, though, with it in Internet Explorer 11 and Windows 7 on a touch enabled display. When a user hits the top of bottom of the scroll, the window bounces (ie, there is overscroll). While this would just be an annoyance for most users, this is running fullscreen in a kiosk, so the overscoll allows the desktop to peek through (not just the browser background).

I have been unsuccessful at figuring out a solution to this. touch-action (prefixed and not), eg

html, body, .scrollable {
  -ms-touch-action: none;
  touch-action: none;
}

doesn't seem to do anything, nor do

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('MSPointerMove', function (e) { e.preventDefault(); }, false);

This jsBin shows the problem.

So, what is the proper way to prevent overscroll in IE11 / Windows 7.

Answer 1

Thinking outside the box (see what I did there) would giving the parent element - body, section or even another div a background colour mitigate the main issue of the desktop showing through?

Otherwise have a look at the

-ms-scroll-chaining: none;

property from http://msdn.microsoft.com/en-us/library/ie/hh772034(v=vs.85).aspx which looks like it might fix your problem - though I have no way to test it myself.