Prevent body scroll without button click

We want to disable the scroll only on mobile landscape breakpoint when user lands on a page. Scroll to be enabled after our ‘turn the device’ modal is clicked.

We’ve seen a few posts from this forum about preventing body scroll when an element is clicked. But we couldn’t find anything about preventing scroll on mobile landscape breakpoint, or preventing scroll when user lands on the page (before clicking on anything on the page).

We tried adjusting codes we found from other sites, but we failed to make things work.

How do we prevent body scroll on mobile landscape when someone lands on a page?

Thanks in advance for your time and help!!

Our read-only link is here

hi @skinpores I don’t now where you have been looking or what keywords you were using to search internet. So the keywords you can use are Media Query CSS, you can also use landscape but is not necessary. Here is one example.

once you know how to target mobile device position use code you need. :wink:

you may also use JS if you know how

but you can find many articles out there that will help you answer your questions.

1 Like

Hiya! Thanks for responding to our post! Great news- We got pretty close to what we want, given our lack of coding knowledge lol

However, when we view it on an iPhone, landscape orientation, there’s still a bit of scrolling that we cannot get rid of. We weren’t able to screen record from the device. So hopefully the screenshots below would help show what we meant.

This is once we loaded the page. (what we want)…

…But we can still scroll down a little (what we don’t want).

We are obviously missing something in the code. But none of the ‘solutions’ we found on the internet seem to work in our case.

Would you be able to help us a little further please?

hi @skinpores sorry I’am on holiday so don’t have access to all my tools to see what happen on your site. Anyway, when I have now opened “dubplate” on my iPhone on landscape there is no message shown (as on image) and I’m also experiencing horizontal scroll (no good either) . This mean that required behaviour need more attention to work on it step by step. :slight_smile: