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

Question

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.

try adding `-webkit-overflow-scrolling: touch;` in css on div as well as on page for ios devices smooth scrolling. — Nimitt Shah, Oct 25 '18 at 15:27
Thanks man that worked! If you write up an answer I'll mark its correct! — mahn00b, Oct 25 '18 at 19:09

Nimitt Shah · Accepted Answer · 2021-03-22T13:34:05.617

1

-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.

edited Mar 22 '21 at 13:34

answered Oct 25 '18 at 19:19

Nimitt Shah

4,477
2
10
21

Please give explanation next time, answer is not useful at all if you don't provide explanation for it. – someRandomSerbianGuy Mar 21 '21 at 07:21

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

1 Answers1