Does not work well in mobile devices

[AviKKi]

mouseenter event is only registered on a tap, using pointerenter and pointerleave may help

[yhau1989]

pointerenter and pointerleave is not supported in Safari/Safari IOS

[AviKKi]

@yhau1989 can you suggest a solution? If you want to solve this I can assign it to you.

[yhau1989]

in mobile the UX concept is touch (click) or slider automatic

[AviKKi]

I get what you are saying, it's how mobile YouTube app shows preview on scrolling, the video on top automatically starts preview.

But it won't work for my use-case, we are using 2 column grid. A expected behavior on mobile is when user touches(not click) over a thumbnail, it should start the preview.

A touch and a click are different, if you tap on the screen it's a click but if you touch and hold for a bit longer, it won't trigger click event; we want to trigger preview in this case.

As library grows we can add more configurations, but for now I'm focusing on this.

PS: My client has suggested that pornhub.com has this type of UX for thumbnail preview

[yhau1989]

@AviKKi haha pornhub.com is good case study, this events is activated when scroll is moving up or down, used id # by example

[AviKKi]

I'll dig into what event listeners they are using when I get the time. Your suggestion makes a lot sense.

[yhau1989]

I am work in a demo 🕙

[yhau1989]

my proposal is done , check out here in your📱

[AviKKi]

@yhau1989 this doesn't seem to be working

Edit -
I had to resize my window for it to work.

I'm summing up your approach for future reference.

• store y coordinate of all the img elements
• when scrolled check the img that coincides with +-10 range for window.scrollY, if found start it's preview.

my remarks and opinion -

• When there are multiple column, only the image on last column will work, as only one preview works at a time, last will override previous ones.
• Images at the bottom of a page won't work, this will work best for infinite scroll behavior.
• Instead of looping through images, we can optimize it with binary search / set (but there is payload overhead).

PS: This seems more like youtube app's logic, I'll reverse pornhub's code later(when I get some ⏰ ) to see how they are doing it.

[yhau1989]

Of course, my change is focus in mobile version, but responsive design needs to be improved