Lock scrolling on Y-axis

Need help Mobile
1

Hi Everyone,

Hope you’re all well! I have had some issues with locking scrolling on the y-axis. How can I stop the user from scrolling on the y-axis?

Regards

2

Its complicated. Requires so CSS to get the page to resize to the browser window.

Check the forum for information on CSS and height of browser window. Then need to set page to change its height to be that of browser window.

Note, this will dramatically affect your pages content and takes a lot of time to consider how to design all elements to fit or adjust their heights as well so they are visible.

3

You can alternatively apply this line of css to your container which shall not be scrollable:

#containerID{overflow-y:hidden !important;}

4

You can do this with a little 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'});