How to make the page not scrollable

Hi everyone,

I 'm working on app containing a repeating group. the reapeating group is scrollable as the page containing it. However, when I reach the end of the repeating group, the page itself is still scrollable. So, What I want is to make the page not scrollable at all. How I can do that ?

Any help would be much appreciated !

Best regards.

Yacine TAZDAIT

Hi Tazya,

I’m sure this isn’t the only way, and there’s probably something better than this too!
But I’ve done it like this…

For the page/group that you don’t want scrolling on, give it an element id of something like ‘stop_scroll’

image

Now put 2 HTML elements on your page/or group like this:

First one:
image

<html>
<head>
<script>
  
$('#stop_scroll').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})

</script>
</head>
</html>

Second one:
image

<div id="anchor"></div>

Now run a JavaScript workflow (from toolbox plugin) on page load or group load (depending on how you have things setup) that looks like this:

image

$(document).ready(function(){ $("#anchor").parents("div.bubble-element.Group").css("height","100vh"); $(".main-page").css("height","100vh") });

And with a bit of luck you won’t be able to scroll on that group or swipe and if the page size was to change as a result of something, the it shouldn’t matter either.

Hopefully though, someone will give you something simpler as you can probably do with one piece of JS but this worked for me anyway.

Hope it helps
Paul

1 Like

Alternatively add this to your Page HTML header and assign the id “noscroll” to the parent container which should have no scroll.

<style>#noscroll{overflow:hidden !important}</style>

3 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.