Kevin Powell - Community•6mo ago

Suggestions on how to correctly handle 2 scrollable items on mobile

I have a main webpage that scrolls like any other website would but on one of my pages I have a full screen interactive map. On desktop this you must click and drag to get around the map. As soon as you scroll you just scroll up or down like normal and kep going down the website. However on mobile the same gesture is used to scroll the website and interact with the site. As soon as the scrollbar for the main website goes away, you can scroll around on the map but then you're kinda stuck unless you press one of the navigation buttons on the bottom. On desktop as you scroll on the map I move the map around and highlight some locations (same on mobile) but if lets say you scroll to the first place and stop, you wont have any way to get to the other locations. Long winded story but basically my question is what is the right way to handle this or what is common practice in such cases as I have a map in my case but I'm sure this type of descision could come up with many other elements.

3 Replies

DennisOP•5mo ago

Hello just would like to bump this as I'm still not sure of a clean way to handle this

Tirius•5mo ago

It depends on the map provider, but most of them should support “two point”gestures. Make that map interaction on phone require two point gestures. Also for a better UX you can make a switcher that switch between two point and one point.

DennisOP•5mo ago

Somebody else suggested I made a toggle for map interactibility and only show it if the device is capable of touchscreen so thats the route I took. Thank you!

let isTouchscreen = false
try {
    document.createEvent("TouchEvent")
    isTouchscreen = true
} catch(e) {
    isTouchscreen = false
}

let isTouchscreen = false
try {
    document.createEvent("TouchEvent")
    isTouchscreen = true
} catch(e) {
    isTouchscreen = false
}

Gaming

Programming

Suggestions on how to correctly handle 2 scrollable items on mobile