Scrolling + Lock

Need help Responsiveness
1

Hi guys,

Is there a way to lock the scrolling function on the page? I want to keep the users of my app at the top of the page and them not to have the ability to scroll down.

Much appreciated :slight_smile:

1 Like
2

“Why?” he asked.

3

You can use some css and the classify plugin… it’s pretty easy.
I referenced the code recently on the forum

Search stopscroll and you will find it

4

Why — if a page is scrollable (meaning there is content we can see if we can scroll) — would we ever need to halt scrolling?

Seriously, the question is malformed. ALSO, whatever the OP is trying to keep invisible is ALSO malformed.

This question MAKES NO SENSE. It does not matter if you CAN do this. The question is “WHY would you ever want to do this?”

5

I have no idea but perhaps because different devices have different heights it would be a ux thing so he can make the screen taller than normal then stop scrolling so there it won’t scroll on devices with a shorter height…
Could be done with a floating group all the same but that’s all I can think of

6

If it some sort of “if you want continue to read - pay”, make popup appear than user scroll down

7

Haha I love all the questions lol! Yes Chad you guessed correctly. I am making my app longer then it needs to be so that all phone devices can see it with out scrolling. Also because I want to hide the bottom of google maps, as it has the ugly advertising and zooming in / out buttons I don’t want displayed.

If you guys know how to turn that off on google maps I would be VERY appreciative.

1 Like
8

Hey @chad thanks for your input, can I please ask how you put that CSS in? Is it as a custom workflow and where you would make the edits? Feel free to DM me, really appreciate your help.

9

You can put it in the header/meta area in the settings of your app or you can put it in the page settings

10

You can accomplish this with a little Javascript work.

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

Thanks. This is also very useful if you use floating groups to display things - for example a list of users that likes a post - and you want the user to scroll within the floating group, but want the page to remain as it is.

1 Like