Prevent Touch Scroll Bouncing in FlexGrid

Content

Most touch devices provide two cool features by default:

1. Inertial Scrolling: When you flick some content, it keeps scrolling for a while, even after your finger has left the screen.
2. Bounce/Overscroll: When you scroll all the way to the top/left of a document, it briefly scrolls past the edge of the document and shows an empty area for a while, then bounces back to the origin.

In some cases, you may want to disable the second feature. For instance, the FlexGrid control has areas that show column and row headers and frozen cells. These areas are not part of the main scrollable element but stay in sync with it as you scroll. The bouncing effect, in this case, may look unnatural and can be distracting or annoying.

There are many articles on the web that describe how you can do that. None of them worked for me, but some provided useful ideas that I was able to adapt to create a disableScrollBounce function that looks like this:

// disable scroll bouncing on a FlexGrid  

function disableScrollBounce(grid) {  

let root = grid._root;  

let start = null;

// record start scroll position and touch event  

root.addEventListener("touchstart", e => {  

// calculate new scroll position  
let newTop = (start.pageY - e.pageY);  
let newLeft = (start.pageX - e.pageX);  
// if x or y are negative, it's a bounce:  
// update scroll position and cancel the event  
if (newTop <= 0 || newLeft <= 0) {  
  root.scrollTo(newLeft, newTop);  
  e.preventDefault();  
  e.stopPropagation();  
}  

start = e;  

});

// update scroll position and cancel overscroll events  

root.addEventListener("touchmove", e => {

});  

}

The function listens for touchstart and touchmove events to compute the new scroll position about to be applied to the grid. If either is negative, the code applies the offset immediately and cancels the event. This prevents the bouncing effect.

You can still see some bouncing depending on the initial scroll position because the code does not disable inertial scrolling completely (that is just too nice to remove). However, if you are at the origin, trying to drag further into the bounce area will not cause any flickering as it normally would.

If you have a touch device, you can try this out for yourself here.

Check and un-check the checkbox and try scrolling through the grid by flicking down and to the right. You should be able to see the difference.

You also have the option to disable inertial scrolling completely. Simply comment out the "if" statement that checks for negative coordinates.