In-pages in scroll snap not working

Design help Custom code
1

I’m new here so first of all: hi there!
This is my first question here in the community and I hope I’ll find a solution :slight_smile:

Here is my site Read-Only: Webflow - good-ones.global

I’ve got a custom code scroll snap. That’s the code:

.scroll-snap-wrapper { scroll-snap-type: y mandatory; } .home, .ourwork, .contact, .testimonials, .footer, .oliver, .oliwork, .oliportfolio, .dilara, .dilarawork, .dilaraportfolio { scroll-snap-align: start; } body { -ms-overflow-style: none; scrollbar-width: none; } body ::-webkit-scrollbar { display: none; } }

I want to add in-page linkings. The browser link adapts it but its not showing on the page, it happens nothing.
Any way to fix that? I read that scroll snap is not supported apart from chrome but I tried it in safari and firefox it works just fine. Only thing that doesn’t work is the in-page linking with this scroll snap.

Thank you in Advance!

3

Hi @utopiaspace,

Try replacing all the code in Page Settings > Custom Code > Inside <head> tag with the below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.css"
/>
<style>
  .scroll-snap-wrapper {
    scroll-snap-type: y mandatory;
  }
  .home,
  .ourwork,
  .contact,
  .testimonials,
  .footer,
  .oliver,
  .oliwork,
  .oliportfolio,
  .dilara,
  .dilarawork,
  .dilaraportfolio {
    scroll-snap-align: start;
  }
  body {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  body ::-webkit-scrollbar {
    display: none;
  }
</style>

Then replace your code in Page Settings > Custom Code > Before </body> tag with the below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.js"></script>
<script>
$(document).ready(function() {
  $('.scroll-snap-wrapper').fullpage();
});
</script>

Then republish your site - this should get it working and you can add options from here!