Direction lock question: On a vertically scrolling page full of horizontally scrolling lists (think Netflix), if the user doesn't drag more or less precisely in the intended direction, it doesn't scroll at all on any axis. I'd like to always scroll either horizontally or vertically, just not both at the same time. Can I hack directionlock to do that, or do I need to add my own logic? My first thought is to just do it myself by leaving direction lock off and checking the angle of the initial drag, and toggle scrollHorizontal/-Vertical as needed..

Sigurd Tapio Mannsåker

Posted Dec 15 - Read on Facebook

Direction lock question: On a vertically scrolling page full of horizontally scrolling lists (think Netflix), if the user doesn't drag more or less precisely in the intended direction, it doesn't scroll at all on any axis. I'd like to always scroll either horizontally or vertically, just not both at the same time. Can I hack directionlock to do that, or do I need to add my own logic?

My first thought is to just do it myself by leaving direction lock off and checking the angle of the initial drag, and toggle scrollHorizontal/-Vertical as needed..

4 Comments

Chris Camargo

Have you tried playing with `directionLockThreshold` yet?

https://framerjs.com/docs/#layer.draggable.directionLockThreshold

Sigurd Tapio Mannsåker

Chris Camargo Here's my solution. Wanted to find a way to do it without having to create a new child class of ScrollComponent, so did it by adding a setter for ScrollComponent.directionFilter that adds an event handler to the content layer on its first touchstart event: http://share.framerjs.com/ggdrroqv6zhk/

Sigurd Tapio Mannsåker

One issue is that if you overdrag, let go and quickly grab it again to scroll on the opposite axis, it'll get stuck in its "overdragged" position since scroll in that direction will have gotten disabled. Could be solved by resetting scrollHorizontal/-Vertical on scroll end, but then it still picks up the momentum along the disabled axis as you let go so it messes with the locking functionality. I'm sure there's an elegant way around that though.

Sigurd Tapio Mannsåker

Koen Bok / Niels van Hoorn Not sure if this is of any interest to you guys, but as a designer this is closer to how I'd expect direction lock to work. Pick the axis you're likely trying to scroll, and lock the other one, but never lock both.

Read the entire post on Facebook