How do I fix a div scroll to make it more smooth?

So I started off with having a problem on mobile phones where I had a div over the main page and whenever I scrolled on that div I would also be scrolling the whole page. I found a fix for this problem from this post as follows:

var $layer = $("#layer");
$layer.bind('touchstart', function (ev) {
  var $this = $(this);
  var layer = $layer.get(0);

  if ($this.scrollTop() === 0) $this.scrollTop(1);
    var scrollTop = layer.scrollTop;
    var scrollHeight = layer.scrollHeight;
    var offsetHeight = layer.offsetHeight;
    var contentHeight = scrollHeight - offsetHeight;
    if (contentHeight == scrollTop) $this.scrollTop(scrollTop-1);
});

This fixed the problem for me but also created another problem. This fix makes the scrolling seem less seamless. Usually when you scroll on a page the page itself sometimes scrolls a little bit past the page based on the speed of the users swipe. Any ideas on how to make this a smoother scroll.

Answer

-webkit-overflow-scrolling: touch; will allow content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. You can read more here

So add this line of code to the CSS of the div:

-webkit-overflow-scrolling: touch;

This should give you smoother scrolling.