User experience when scrolling on mobile devices

asked 2021-09-28 22:04:18 +0800

softteam gravatar image softteam
120 8

Hi, we noticed some not smooth movements on mobile devices (we use Tablet mainly) when scrolling horizontally.

Both on Tablet and mobile, the user experience when performing horizontal scrolling is not entirely satisfactory, a couple of problems are perceived: 1. The column headers do not move at the same time that column content do. 2. Sometimes content perform not desired movements especially when scrolling slowly.

I created a fiddle to respresent it: https://zkfiddle.org/sample/11blnm1/15-Grid-STS

What can we do?

Thank you, Javier

delete flag offensive retag edit

3 Answers

Sort by ยป oldest newest most voted

answered 2021-09-29 18:15:59 +0800

hawk gravatar image hawk
2874 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-09-29 18:30:53 +0800

Move delay issue

when I move cells horizontally (left or right) in iPad, Chrome, iOS 14.0 the grid column headers move a bit late than the content rows, see the video.
is that the case you saw? which device and browser do you use? It seems firefox doesn't have this issue.

not desired movements

I am not sure what is "not desired movements", could you describe the clear steps or provide a screenshot or video?

link publish delete flag offensive edit

answered 2021-09-30 11:41:36 +0800

hawk gravatar image hawk
2874 1 5
http://hawkphoenix.blogsp... ZK Team

updated 2021-09-30 11:46:50 +0800

move delay issue

Such a delay is caused by the difference between browser native scrolling and onScroll event listener. (see https://hacks.mozilla.org/2017/11/async-panzoom-apz-lands-in-firefox-quantum/).

The current workaround is not to use grid inner scroll with the steps below:

  • we expand the grid to its full width by width="min-content".
  • enable scroll bar on the outer dive by style="overflow-x: auto;"
  • put paging control out of grid to avoid being scrolled by onCreate="self.setPaginal(pag);

please see the full example which can eliminate the scrolling delay.

link publish delete flag offensive edit

answered 2021-10-15 16:34:46 +0800

softteam gravatar image softteam
120 8

Hi Hawk,

This is working for me but I would like grid width to be as wide as possible in order to use all screen width in desktop devices. I got this:


image description

An I would like something like this but without the move delay issue:


Thank you, Javier

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2021-09-28 22:04:18 +0800

Seen: 14 times

Last updated: yesterday

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More