On Mobile if using body as scrollingContainer the scroll into view function is problematic

[sferoze]

There are 2 seperate issues with scroll into view on mobile

1. So far I have only noticed this on Mobile iOS device but the fix is appropriate for all devices.

scroll into view function uses the following code

let scrollBounds = scroller.getBoundingClientRect();
    if (bounds.top < scrollBounds.top) {
      scroller.scrollTop -= (scrollBounds.top - bounds.top);
    } else if (bounds.bottom > scrollBounds.bottom) {
      scroller.scrollTop += (bounds.bottom - scrollBounds.bottom);
    }

But on mobile bounds.top, and bounds.bottom are both 0. And when they are zero the scroll starts to shift in erroneous ways. At first the values are present but after scrolling a bit the values go to 0.

I fixed this by simply checking for the existence of those values

if (!!bounds.top && !!bounds.bottom) {
      if (bounds.top < headerHeight) {
        scroller.scrollTop -= (headerHeight - bounds.top);
      } else if (bounds.bottom > windowHeight) {
        scroller.scrollTop += (bounds.bottom - windowHeight);
      }
    }

In the same function the getting the bounds using let scrollBounds = scroller.getBoundingClientRect(); doesn't work if using the body as scrollingContainer. The return value of getBoundingClientRect() is not the same every time, and it changes depending on the scroll position. The code was written expecting getBoundingClientRect() to return the same value no matter the scroll position.

My solution is below:

    let headerHeight = 65;
    let windowHeight = window.innerHeight - 20;
    if (!!bounds.top && !!bounds.bottom) {
      if (bounds.top < headerHeight) {
        scroller.scrollTop -= (headerHeight - bounds.top);
      } else if (bounds.bottom > windowHeight) {
        scroller.scrollTop += (bounds.bottom - windowHeight);
      }
    }

Platforms:
Tested on Safari and Chrome, and all Cordova Platforms using Quill 1.2.5

Version:

1.2.5

[jhchen]

Can you provide minimal reproducible examples for both? I am unable to find a situation where bottom and top are 0, where the height is not also 0.

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏