How to make the page not scrollable

Need help
1

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

2

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
3

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
4

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