Stop Page Scroll

Idea
1

It would be nice to have a workflow action in the elements section that would be for the page. Specifically one to stop the page from scrolling.

1 Like
2

or to make an element scroll

3

If you want to do that, for now there is the ability to run a javascript code. I am actually in the process of trying to apply this for the purposes of stopping the page from scrolling.

Check out this app…it has some javascript as well as HTML examples of how to customize the scroll bar appearance.

4

I put something together that seems to be working for me. I am using this javascript in the trigger javascript workflow action

$(document).ready(function(){
$(“#page”).css(“height”,“100px”);
$(“#page”).css(“overflow-x”,“hidden”);
});

This is done when my overlay group that blurs the background of page and displays a loading wheel (you can use overlay groups to act like popups but takes a bit of effort) is visible. This effectively stops the page from scrolling and interestingly doesn’t cut the content off…I can see the full content of according to the browser height.

Then when the overlay group is not visible I run this javascript.

$(document).ready(function(){
$(“#page”).css(“height”,“1240px”);
$(“#page”).css(“overflow-x”,“hidden”);
});

My page in the editor is built to be 1240px in height, so this is setting it to its original value. I am using this on a search results page with repeating groups that have dynamic heights. What is interesting is as the height of the repeating group increases, the javascript setting page height doesn’t stop the page from increasing accordingly.

This has effectively gotten my page to stop scrolling as my repeating groups are loading results from the search.

Still would be nice to just have a simple workflow though and really be no-code.

5

I do similar with a HTML element and some css.
I have the data for the HTML element empty by then have a condition linked to a state that says when the state (let’s say toggleStopscroll) is yes
HTML data =

#stopscroll{ ...css code I can’t remember off the top of my head.... }

Also the element is must be stopscroll which on this occasion would be the page.

I also use it when using re usable popups which don’t always stop the page behind from scrolling or as you said when making your own popup

6

Actually what you have presented might be a little different I will check it out a little later when I’m by my computer

7

I’d be interested in seeing a screen shot of that HTML element with the code. I have not had any luck getting an HTML element to stop the scroll, which I would rather as I believe it would be more efficient than running a workflow to trigger Javascript.

8

It’s pretty simple css punch in the following (minus all the >)

#stopscroll{ position: fixed !important; }
9

Thanks for that. I have a couple questions.

  1. Is the page given an id of “stopscroll”?

  2. Is there any need for or anything else in the HTML or just simply the

#stopscroll{ position: fixed !important; }

as above?

Cheers

10

Ah gee sorry you need

<script> </script>

before and after and yes assign stopscroll to the page.
I can’t remember if I added Cssify plugin

2 Likes
11

Hey Chad

When using the HTML you put up, I have successfully gotten the page scroll to stop. The issue I am having now is that I use this function in my header. I have it floating often and on a page that a user is scrolling, and then triggers the HTML through the floating header, the page does stop scrolling, but it first scrolls to the top.

After the HTML is removed through conditionals and the page can be scrolled again, it is at the top of the page still and does not automatically scroll back to its position at the time the HTML was triggered.

Do you experience the same thing? If so, have you figured a way to get the page to scroll back to the position it was at?

I thought about storing the ‘current page scrolling position’ and then using the scroll to workflow action, but that is only capable of scrolling to an element and not a page position.

12

I use the code in a HTML element which is blank but the condition has the code.
I haven’t experienced what you talking about. For me the page would just stop scrolling

13

Hi @chad & @boston85719,

I tried everything possible to stop the extra white spacing appear but can’t make it work.
Can one of you show me how did you set it up? a screenshot of the HTML would be great too. Also, did you have to install Cssify plugin too?
Any help would be great! :slight_smile:

14

It looks like this is still an open issue for some? I too would like to have more control over my page scrolling. However, I’m a non-technical user with very limited ability to use code. Can someone direct me, and perhaps others, to a clear example or tutorial on how exactly one can prevent their screen from scrolling. I, would greatly appreciate it and I’m sure others will too.

1 Like