Preventing the scroll on touch on a mobile device

Community Help
1

I would like to use the chessboard.js board on a mobile device. Opening that notebook on a mobile device introduces the problem, that moving a chess piece (by dragging and dropping a piece) is a touch event which also causes the web site to scroll.

Is it possible to prevent the browser from scrolling when the user touches the ‘div’ area?

2

I would think that, in your definition of highlight, you might try something like:

highlight = {
  let highlight = html`<div id="highlightBoard" style="width:100%;height:auto;max-width:500px;"></div>`;
  highlight.addEventListener("drag-start", (evt) => evt.preventDefault());
  return highlight;
}

Unfortunately, your notebook doesn’t even load on my iPhone so I can’t try it. :frowning:

3

Thanks for the quick answer!

Unfortunately, the suggestion doesn’t change any visible behaviour - the scolling of the browser still prevents the piece movement.

It is strange you can’t load the notebook on your Iphone, I can see it on mine (with Safari 16 as well as Chrome v107.0.5304.66)

4

I didn’t even think to try Chrome! Try this:

highlight = {
  let highlight = html`<div id="highlightBoard" style="width:100%;height:auto;max-width:500px;"></div>`;
  highlight.addEventListener("touchstart", (evt) => evt.preventDefault());
  return highlight;
}
1 Like
5

I just wanna point out that touch support seems to be very lacking in general:

1 Like
6

Thanks that works great!

1 Like
7

Thanks @mootari for digging and pointing that out! It seems to refer the solution mcmcclur provided. Despite Chessboard.js has not been designed mobile-first, with the touch events prevented from firing scroll behavior, it is quite a pleasant result using it on a mobile device.