How can I prevent a user from scrolling down the page if he didn’t input something or selected an option?
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
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(){};
}
Not fully satisfied with window.onscroll
It works but appears jerky.
Any solutions would be greatly appreciated.
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…
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)
Its still kind of janky but not as bad as your video
any solutions for horizontal scrolling?
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'});
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.
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
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
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.
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>
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
Great, that works perfectly fine. I execute the code snippet when the page is loaded.
Only tested with the first snipped @aj11 provided.
guys here an easy way, it’s working properly.
To prevent scrolling on the background page when a floating group is open in Bubble.io, you can use JavaScript to manipulate the scroll behavior. Here’s how to do it:
- Add the following JavaScript code to run when the floating group opens:
javascript
Copy code
document.body.style.overflow = 'hidden';
- Restore scrolling when the floating group closes:
javascript
Copy code
document.body.style.overflow = '';
Detailed Steps:
- Create a Workflow in Bubble.io for the event when the floating group opens:
- Go to the relevant Workflow.
- Add an action to show the floating group.
- Add a “Run JavaScript” action using the “Toolbox” plugin.
- In the JavaScript code, add:
document.body.style.overflow = 'hidden';
- Create a Workflow in Bubble.io for the event when the floating group closes:
- Go to the relevant Workflow.
- Add an action to hide the floating group.
- Add a “Run JavaScript” action using the “Toolbox” plugin.
- In the JavaScript code, add:
document.body.style.overflow = '';
Example:
For opening the floating group:
- Event: When the open button is clicked.
- Action: Show the floating group.
- Action: Run JavaScript:
javascript
Copy code
document.body.style.overflow = 'hidden';
For closing the floating group:
- Event: When the close button is clicked.
- Action: Hide the floating group.
- Action: Run JavaScript:
javascript
Copy code
document.body.style.overflow = '';