onViewportEnter not working for horizontal scrolls ?

Ask the community
,
1

Hi,
I want to detect when user is doing a horizontal scroll on a mobile, namely when a button disappears from screen when scrolled laterally (transparent column sort buttons on table headers, the table being too large to fit on a mobile screen without lateral scrolling).
But it seems not to work.
I’m using the button property panel, onViewportLeave event handler, but no effect when scrolling the button out of view laterally.
During testing, I discovered that onViewportLeave / Enter work well on vertical scrolls…
Is it a matter of mobile screen size detection or is it simply not working for horizontal scrolls ?

2

It will only work on vertical scrolling up and down the page.
https://www.wix.com/corvid/reference/$w.ViewportMixin.html
https://www.wix.com/corvid/forum/community-discussion/scrolling-horizontally

If your table is too big to be viewed on mobile devices, then why not just make a seperate table that is viewed on mobile devices only?
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

Otherwise, you can add it via html code.
https://medium.com/flexbox-and-grids/how-to-create-horizontally-scrollable-sections-with-flexbox-60d860f539b2

Or see if Wix Package Manager supports the React NPM.
https://www.npmjs.com/package/react-horizontal-scrolling-menu

3

Thank you Givemeawhisky,

I have a few replacement solutions at hand + yours, but of course none is as nice as it should be… flexbox and reactNPM look interesting, but I don’t quite see how to synchronize the header scroll with the table rows scroll, as there is no way - as far as I can see - to catch the lateral table scroll amount in Wix.

So I’m left with :

  1. either adapting a separate table for mobile, but this won’t be feasable (size issue)

  2. or widening the transparent header buttons to allow users to more or less reach them even if they are not exactly on top of the columns, but quite awkward.

  3. or using the first table row as header, and allowing to select cells, using this selection as sort button, but then no cosmetic difference between header and rows

  4. or rather showing sort buttons outside of the table on mobiles, this looks the easiest solution so far