This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Robert Gaal
Posted May 23 - Read on Facebook

If I make a layer scrollable, and I swipe its contents with my finger, a TouchStart and a TouchEnd event fire. This is annoying when scrolling a list with individually selectable items. It means that when I scroll I accidentally select one of the items in the scrollable list. Is there any way to counter this?

17 Comments

Koen Bok

Look into event.preventDefault()

Robert Gaal

I thought it might be something like that, but this doesn't help.

layer.on Events.Scroll, (e) ->
e.preventDefault()

Elliott Kember

This has always been hard with touch events. I've worked around it in the past by adding a delay on a touchStart event on the scrolling layer, checking whether the touch position moves, and firing the event if the touchEnd event happens within a certain time.

Tisho Georgiev

Easiest solution is to just use hammer.js and its "tap" event. It gets around this problem in a way that's similar to what Elliott described, but also accounts for things like long holds or multiple taps.

Elliott Kember

Yes that's much better advice!

Robert Gaal

Thanks for the comments! I've tried to fix this by, instead of using a TouchEnd event to select an item, using Hammer.js's Tap event. Unfortunately, that doesn't work either. I still have the same problem. Is this maybe an issue with Framer's scrollable property?

Koen Bok

Bobby, I'll look at this if you can make me a super small .framer project that shows it and send it to me.

Flip Sos

Hey Robert, I have an issue that creates exactly the opposite effect (Things are not touchable when scrolling: https://dl.dropboxusercontent.com/u/3142787/draggableBug.framer/index.html)

I would be very, very interested in seeing the sample project as well!

Jordan Robert Dobson

Did this ever get resolved for anyone?

Alex Hazel

event.preventDefault isn't respected in Framer Studio (or in the output) for some reason. However, if you do:

myLayer.on Events.Scroll, ->
return false

That should block all touch and click events while you are scrolling. But it will completely kill all interactivity with those elements in your scroll container.

So if you have click events for the list items then they won't fire when you stop scrolling and try to click on them.

Jordan Robert Dobson

Maybe in that instance you want stopPropagation.

Alex Hazel

stopPropagation is also ignored....I been playing with it all night....Though I could be wrong....if someone better than me wants to test. But from my tests....The only thing that worked properly was "return false"

Alex Hazel

myLayer.on Events.Click, (e)->
e.preventDefault()
e.stopPropagation()
# I even tried e.stopImmediatePropagation() and nothing worked.

I had an animate command call after the click and put those event declarations in my code BEFORE the animation ran. Nope.

When I clicked the element, the event still fired and the animation ran.

When I used return false, the events acted as they were supposed to. Clicks were intercepted and animation never fired.

Clement Ng

I had the same issue with accidental triggering of Tap events when scrolling. I got around it by setting a scrolling variable to true on scroll start and setting it to false on scroll end. And I added a conditioning inside the onTap event to only execute codes if scrolling is false.

Koen Bok

This is actually fixed since a month or so. If you click/tap something inside a ScrollComponent, it won't trigger the event above a certain velocity: https://github.com/koenbok/Framer/blob/master/framer/Layer.coffee#L976

Jon Madison

on the event handler i use

unless scroll.isMoving
<actions>

Read the entire post on Facebook