Presto - Lock Scroll iPhone Safari

boston85719 · 2020-11-12T19:03:14.197Z

Can somebody verify if the Presto plugin, by @Taiheta, function works on iOS devices and specifically an iPhone X using Safari?

I have it installed. Set my page to be locked. It works fine on my desktop, but testing on an iPhone X it doesn’t work.

Am I missing something or does it not work on iPhone?

Taiheta · 2020-11-12T21:14:33.500Z

hi, it should work this is the library I used:

GitHub

tuateam/tua-body-scroll-lock

🔐 Body scroll locking that just works with everything - tuateam/tua-body-scroll-lock

I’m not using bubble much anymore or maintaining any of my plugins but iirc there should be a field needed for safari, should explain it in description.

aj11 · 2021-01-20T22:20:16.058Z

Here is how to accomplish this just with Javascript:

You will need either the Components or Toolbox plugin in order to run JavaScript from a workflow.

Step 1: Place javascript element so that it is visible when scroll will be locked.

Step 2: Add “Execute with Javascript” or “Run Javascript” to your workflow and paste in one of the code snippets below.

Step 3: To unlock scroll, run a javascript action with the script at the bottom.

CODE SNIPPETS

Lock at top of window:

$('body').css({'overflow':'hidden'});
$(document).bind('scroll',function () { 
window.scrollTo(0,0); 
});

Lock at bottom of window:

var body = document.body,
html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
html.clientHeight, html.scrollHeight, html.offsetHeight );

$('body').css({'overflow':'hidden'});
$(document).bind('scroll',function () { 
window.scrollTo(0,height); 
});

Lock on element:

var elemntheight = document.getElementById("BubbleElementID").scrollHeight

$('body').css({'overflow':'hidden'});
$(document).bind('scroll',function () { 
window.scrollTo(0,elemntheight); 
});

Unlock:

$(document).unbind('scroll'); 
$('body').css({'overflow':'visible'});