Snap scrolling in Brine template

Hi there! 

Does anyone know how to do snapscrolling in Brine template with css? 

Like the first section of this website: 

https://www.serta-japan.jp/special/?utm_source=gkt&utm_medium=cpc&gclid=CjwKCAiA_MPuBRB5EiwAHTTvMUb8pOQQ0MqIZhy2gjd57Essi_Xj0FOn7CSJJ3Dkpch_XVxCzg7RhxoCWEQQAvD_BwE&fbclid=IwAR0xZQg6nv2lYHsLmuCxmQ0-gRMqeB7HC2pfAucptG7njcpA9kWIcIDqK8Y

Thanks a lot in advance if someone can help. 

Sheri Lai

Hi @sherilai

The code provided by @Justmadeit works in Brine:

Here you'll find various options (scrollSpeed etc.)
https://github.com/lukehaas/Scrollify

Thanks @Magne

This code works but can I only apply it to one page or one section only? 

Thanks very much in advance. 

Sheri 

@sherilai

Hi Sheri,
Yes you can.
In a Brine index page with eg four sections - /jerry, /joe, /jack, /jeff - but only jerry snapped the code would be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".Index-page",
            standardScrollElements: "#joe, #jack, #jeff",
          });
        });
</script>

Magne

@MagneM

I tried using this code, and it sort of worked- it seems to throw it's hands up in the air if one of the sections is a collection rather than a layout. Is there a workaround?

On 12/27/2019 at 12:40 PM, MagneM said:

@sherilai

Hi Sheri,
Yes you can.
In a Brine index page with eg four sections - /jerry, /joe, /jack, /jeff - but only jerry snapped the code would be:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<script>
        $(function() {
          $.scrollify({
            section : ".Index-page",
            standardScrollElements: "#joe, #jack, #jeff",
          });
        });
</script>

Magne

hey mage,

i try this ne code on my website and it works so great with your "standartscrollelements" ideas.

but there is one big fail on my site.

i have a summary blog on my site.

everything works great but with this code i can´t get my summay blog work on tablet or mobile.

the code cut my blog in half 🙂

have you any idea how can i get this code work?

i only use snap to scrolling in wordpress and this is much more easy for me!

any tips?

sarah

Sarah, you may have found your answer already but if not, I think if you take a look at Scrollifys config options you’ll get some more info. Out of the box there are some defaults already selected. You should look at the options but I think you’ll find some luck by disabling the “setHeights” option to “False”.