First i would describe what I'm trying to achieve:
Basically I have a simple scrollable div as a container. But once it is scrolled to the top, I want the entire div to be pan-able (eg. to swipe the container down) - when i attempt to swipe it down. But I want to retain the scrolling in the case that I swipe it upwards (scrolling downwards), it scrolls normally downwards. Check out Facebook's container element when it opens a container on their app.
I am currently using a simple div with panning from Hammer and a scrollable div, but i encounter a problem:
- Once I allow the entire div to be pannable, I cannot scroll the div now.
- Hence, I cannot detect whether a user is attempting to swipe down or up the div to pan and scroll the div respectively.
I am wondering what are some suggestions to approach this conflicting issue! Thank you!