Div won't scroll back on top once it reaches bottom

I wrote some code in HTML and javaScript to demostrate how one can prevent an element from scrolling using the code below.

However, this code works perfect on desktops but when i run this in the latest android webview, [the element(s) other than the targeted element] stops scrolling and instead activates the swipe view and perhaps refreshes the page rather than scrolling back on top. Javascript is required of me not css.

Expectations.

Done.
(1)The targeted element shouldnt't scroll.

Not working
(2)Other elements within the DOM can scroll from top to bottom and viceversa

code

$("#a ").bind("scroll touchmove mousewheel DOMMouseScroll", function(e) {
  e.preventDefault();
});
html,
body {
  background: whitesmoke;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

#a {
  background: red;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

#a>div,
#b>div {
  background: #000;
  width: 100%;
  height: 100px;
  margin: 10px 0;
}

#b {
  background: green;
  width: 50%;
  height: 400px;
  position: fixed;
  overflow: scroll;
  top: 0;
  /*display: none;*/
}

#b>div {
  background: deeppink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="a">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>


<div id="b">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

I hope am brief enough and hopefully will get some help otherwise thanks in advance.