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

What is Framer? Join the Community
Return to index
Kostantinos Frantzis
Posted Jul 10 - Read on Facebook

I wanted to prevent my prototype body from scrolling.
I did it using:
$(document).on("touchmove", function(evt) { evt.preventDefault() });
and it works great.
Problem is that all my scrollable framer layers dont scroll any more.
Any ideas?

4 Comments

Benjamin Den Boer

Have you tried using overflow:hidden on the layers you'd like to target?

layerA.style.overflow = "hidden"

Kostantinos Frantzis

Benjamin it does not work. both setting overflow to "hidden" or "scroll" do not solve the issue, as when I try to scroll the layers on an ios device I trigger the $(document).on "touchmove" event. Any other ideas?

Benjamin Den Boer

Have you tried specifically targeting the 'prototype body' with the touch move event? So instead of calling preventDefault on the entire document, you maybe able to call it on the framer Layers instead.

Tisho Georgiev

You need to call event.stopPropagation() on touchmove events for the scrolling layers. preventDefault() is what actually stops the scrolling behavior, so even if you scroll within a layer, the event will bubble up the DOM tree, until it reaches the document, where it will be cancelled, so scrolling will not occur. So you need a way to tell the browser to not bubble up the event if a scrollable layer caught it first. This is what stopPropagation() does. BTW, this is done for you automatically on all mobile devices.

Read the entire post on Facebook