Forced 100% scrolling

Design help General
1

Hi all - does anyone know how to easily implement forced 100% scrolling?

I have 4 sections at 100% height connected to my side menu - that works fine - however i’d like it to work that when I scroll up/down it scrolls and locks in each section in their 100% height view rather than scrolling normally through the sections and seeing half a section at a time.

Thanks for the help :smile:

https://webflow.com/design/joshoverton?preview=f557f6be372677a4f9e2f2b65dfe7c0c

2

What you’re describing is often called “scroll hijack” and isn’t achievable natively in Webflow.

So you’ll have to add some JS code.

First thing I found on Google: http://codepen.io/14islands/pen/fwBvL
And this How I Built The One Page Scroll Plugin — Smashing Magazine to build this http://www.thepetedesign.com/demos/onepage_scroll_demo.html

Try and come back to tell us how it went (:

1 Like
3

Your site layout and look is quite nice as it is already.

1 Like
4

Cor blimey - that looks very complex - I know 0% of javascript language - I’d have no clue on how to tie that altogether along with my nav :slight_smile:

Thanks for the quick response (and design compliment - that nav animation took me about 4 hours of tweaking!)

I’ll book mark these pages for one day after i’ve learnt javascript!

Cheers!

5

I know nothing in JS but sometimes I succeed using snippets I find on sites like Codepen. Most of the time I miserably fail.

The basics:

There’s HTML code, that you can try to reproduce in Webflow: most likely, it’s giving the right classname for the right element. You don’t want to just use the weblfow HTML Code widget because you’ll lose the ability to style these elements in Webflow too.

There’s CSS code that you can either add as custom code in your site dashboard, or reproduce within webflow if you know how to translate CSS code to Webflow UI (it’s easy, it’s the same vocabulary), or a mix of both.

There’s JS that you have no choice than to add as custom code, either in the site dashboard custom code zone (code will be placed in the head of all the pages of the site) or in the page itself with the HTML code widget, so it appears in the HTML body of the page. JS scripts usually require a specific place to work or work well: either in the head, or at the beginning of the body, or the end of the body.

That’s pretty much all I know and most of the time it’s not enough (: The real thing I miss is not being able to use the browser inspector to debug JS, so when it doesn’t work, I can’t do anything.

1 Like
6

Thanks for all that - was a good read and very helpful! I’ll definitely give this a go once I finish off the rest of the site.

Can you not publish to a subdomain and then use the JS debug thing on the live version?

Cheers!

7

is this what you are looking for ?

2 Likes