block the scroll in a specific page

Solved
SabreDoree
New Member
4 0 2

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.

Accepted Solution (1)

Accepted Solutions
PaulNewton
Shopify Partner
3404 222 650

This is an accepted solution.

Always backup theme files before making code changes.

 

In theme.liquid add the following before the opening <body> 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 -%}
    <style>
        body {
            position: fixed;
        }
    </style>
{%- 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.

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Replies 4 (4)
SidouLF
Excursionist
24 5 3

Hey @SabreDoree 

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

SabreDoree
New Member
4 0 2

Hey, I sent it to you by private message!

PaulNewton
Shopify Partner
3404 222 650

This is an accepted solution.

Always backup theme files before making code changes.

 

In theme.liquid add the following before the opening <body> 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 -%}
    <style>
        body {
            position: fixed;
        }
    </style>
{%- 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.

Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

SabreDoree
New Member
4 0 2

Thank you a lot, this worked for me !