Breaking vertical scroll in IE and Edge on windows 10

Question

I have a very interesting bug, for which I couldn't find answer. If anyone can help I will be very grateful.

I have two div's

   <div id="container" class="container">
        <div class="content"></div>
   </div>

They have the following CSS

.container {
    position: relative;
    width: 700px;
    height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}

.content {
    width:1500px;
    height:1500px;
    background:#555;
}

I have to scroll horizontally the first one with 50px to the left using JS

var cont = document.getElementById('container');
cont.scrollLeft = 50;

The problem is that if I have overflow-x:hidden on the .container and I scroll the .container horizontally to the left using JS, this blocks the vertical scroll if I try to scroll with the mousewheel... This is happening only in IE and Edge under windows 10

Open the Codepen example under IE and try to scroll the .container vertically using your mousewheel.

Codepen Example

Answer 1

The solution is this:

cont.scrollLeft = '50px';