Lock Scroll and Unlock Scroll from Workflow with Javascript

Tips
1

This took me a ton of work to figure out so I wanted to share it and hopefully save others some time.

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'});
3 Likes
2

Thanks took me 5 min to make it work :pray:. But 1 day to find out about your post :sweat_smile:

1 Like