How can I block scrolling on specific pages of my website?

Store Design
1

Hello everyone,

After a long search I finally found a way to block the scroll on my website with this code I found on the internet;

body {
 position: fixed; 
}

Unfortunately I want to block the scroll only 2 pages; the homepage and another page.

It turns out that the code I found on the internet blocks the scroll on the whole site.

I would like to be able to block it only on my home page and another page.

(I specify that I know absolutely nothing about code! I’m posting this message hoping to find someone who can guide me).

Thank you in advance if you take the time to answer this headache.

2

Hey @SabreDoree

Can you send me the URL of your store as well as which 2 pages you want to block

3

Hey, I sent it to you by private message!

4

Always backup theme files before making code changes.

In theme.liquid add the following before the opening tag and tailor the placeholders ‘-handle’ to need.

{%- if template == 'index' or page.handle == 'page-handle' or product.handle == 'product-handle' or collection.handle == 'collection-handle' -%}
    {%- comment - %} DISABLE SCROLLING {%- endcomment -%}
    
{%- endif -%}

Advanced but cleaner alternative - if you have a OS2.0 theme that lets you add a custom liquid block to the entire site do that instead of modifying theme.liquid directly, or add the CSS as custom-html blocks directly to a the homepage and for your other page give it an alternative template again giving it the CSS in an custom-html block.

5

Thank you a lot, this worked for me !