block the scroll in a specific page

SabreDoree · ‎11-25-2021

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.

PaulNewton · ‎11-25-2021

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.

Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

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

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

View solution in original post

SidouLF · ‎11-25-2021

Hey @SabreDoree

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

- Was my reply helpful? Click Like to let me know! and Mark it as an Accepted Solution

- Feel free to contact me if you need any help and and have any issue.

SabreDoree · ‎11-25-2021

Hey, I sent it to you by private message!

PaulNewton · ‎11-25-2021

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.

Save time & money ,Ask Questions The Smart Way

Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com

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

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

SabreDoree · ‎11-26-2021

Thank you a lot, this worked for me !

block the scroll in a specific page

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links