Prevent Touch Scroll Bouncing in FlexGrid

Most touch devices provide two cool features by default:

• Inertial Scrolling: When you flick some content, it keeps scrolling for a while, even after your finger has left the screen.
• 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 Wijmo 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 => {  
    start = e;  
  });  

  // update scroll position and cancel overscroll events  
  root.addEventListener("touchmove", 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();  
    }  
  });  
}

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.

*Orginally posted on GrapeCity on the 21st of the 21st year in the 21st century by Bernardo de Castilho.

Bernardo de Castilho leads GrapeCity's technical direction as the company's Chief Technology Officer. Before gaining more than 20 years of experience in the software industry, Bernardo earned a doctorate in Civil Engineering at UC Berkeley. He loves the diversity of a global company like GrapeCity, as well as the challenges and freedoms that come with working on the cutting edge of software development.