How to prevent the user to scroll verticaly?

Questions
1

How can I prevent a user from scrolling down the page if he didn’t input something or selected an option?

2

One way of doing it is by using a popup and setting popup can’t be closed pressing ‘Esc’

You can also disable other inputs until conditions are met etc. I personally use the poup

3 Likes
3

in case anyone comes along this thread like i did and needs an alternative to the popup solution. i set a workflow based on the scroll position > x and that triggers the javascript toolbox plugin and run the following:

function disableScrolling(){
    var x=window.scrollX;
    var y=window.scrollY;
    window.onscroll=function(){window.scrollTo(x, y);};
}

and then to re-enable:

function enableScrolling(){
    window.onscroll=function(){};
}
4 Likes
4

Not fully satisfied with window.onscroll
It works but appears jerky.

Any solutions would be greatly appreciated.
giphy

Demo: https://scroll-lock-demo.bubbleapps.io/version-test?debug_mode=true
Editor w/View Permissions: Scroll-lock-using-js-demo | Bubble Editor
Duplicate Editor w/Edit Permissions: Scroll-lock-demo-editable | Bubble Editor

I’ve also tried implementing @raymond’s solution but I can’t figure out how to hide the pop up when the user tries to scroll back up…

5

Hey I know this is thread is kind of old but you can set a workflow that make it so every time the current scroll is greater than or equal to 1 it sets the scroll position to your header (just place an invisible object against the top of the page if you don’t have a header)
image
image
image

Its still kind of janky but not as bad as your video

6

any solutions for horizontal scrolling?

7

This can be done smoothly with some 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'});
7 Likes
8

Look at my response above. They will all work for horizontal scrolling as well. They will lock at far left scrolled by default, but just change the 0 in (0,height) to something else if you want it to lock to a different point.

9

hey AJ11, thanks for posting this snippet.

although it didn’t work for me, I can still scroll down/up. Is it still working for you? thanks

image
image1014×918 80.1 KB

10

It stopped working for me too.

I’m now using a variant of ontouchmove > preventdefault

here’s a thread about it: javascript - How to prevent default handling of touch events? - Stack Overflow

11

weird… the js shared by @aj11 are working fine… I’m using toolbox and tested on microsoft edge and Safari for iOS. Using lock on top and unlock events.

12

I’m using this now in the page html header.

<script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('mapa').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script>
<style type="text/css">
body {
    overflow:hidden;
}
</style>
<iframe id="maps" src="URL" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%" frameborder="0" wmode="transparent"></iframe>
13

Thank you so much @natserrano for this code! It works perfect everywhere…

…except for the iOS PWA version I built per the excellent PWA tutorial that @JohnGiaccotto created here. The PWA Android scroll is disabled, its just the PWA iOS where the scroll has not been disabled.

@natserrano or @JohnGiaccotto do you have any suggestions for how to disable vertical scroll in an iOS PWA?

Thank you in advance for any help

14

Great, that works perfectly fine. I execute the code snippet when the page is loaded.
Only tested with the first snipped @aj11 provided.

1 Like