Actual codes are generated by javascript and jquery but simply I created html code as below only for the testing.
<head>
<style>
body {
overflow: hidden;
}
</style>
</head>
<body>
<div id="root">
<div style="height: 40px; overflow: hidden;">Title</div>
<div style="overflow-x: auto; height: 100%;">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li>o</li>
<li>p</li>
<li>q</li>
<li>r</li>
<li>s</li>
<li>t</li>
<li>u</li>
<li>v</li>
<li>w</li>
<li>x</li>
<li>y</li>
<li>z</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>l</li>
<li>m</li>
<li>n</li>
<li>o</li>
<li>p</li>
<li>q</li>
<li>r</li>
<li>s</li>
<li>t</li>
<li>u</li>
<li>v</li>
<li>w</li>
<li>x</li>
<li>y</li>
<li>z</li>
</ul>
</div>
</div>
</body>
</html>When I run above code in most of browsers, it's run as I expected.(I ran this in IE-11, Edge, and Chrome) Browser's scroll is hided, Title div area is freezed and list area has a scroll. But when I emulate this code with IE-11 with IE-7 rendering browser's scroll is shown again and whole page is scrolled including Title div area. Does anyone give me a tip for resolving this?