Section linking with horizontal scrolling

You can see that when you click on the button home,or contact, rewind always entitled to a little distance
http://jinvertscroll-d77b6179296-5c13656f654a7.webflow.io/#pageHome

can you provide a share link? I’m thinking you are using anchors which isn’t going to work in this design but I’d need to see the layout.

here is the link
https://webflow.com/website/jinvertscroll-d77b6179296-5c13656f654a7

Hi @hol1231, thanks for the link. Take a peek at this post that discusses how to get section linking to align properly: Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation - Webflow Tips - Forum | Webflow

I took a look at your site layout, and it does not seem to be setup for vertical scrolling. Horizontal scrolling to sections is not yet supported.

Could you explain a bit more what you are trying to achieve? At the moment, the current page layout is not going to work with vertical scrolling as two of the sections have overflow hidden and one section is already in view on page load.

Hi @hol1231, yes I think there should be no issue with those plugins. See here how to add custom code to your site: http://help.webflow.com/faq/how-to-add-custom-head-and-body-code-to-a-webflow-site

If you need help with the integration, post in the code help category :slight_smile:

Hi, I found how to add through the code . but it does not work, what could be wrong ? ,How to implement waypoint horizontal navigation with jInvertScroll ? How to implement waypoint horizontal navigation with jInvertScroll ? · Issue #15 · pixxelfactory/jInvertScroll · GitHub ,Here is my example of a non-working https://webflow.com/website/jinvertscroll-d77b6179296-9a12ee0cd7e55

what exactly do you mean? i think it works pretty well ?

if you click in the upper left corner on the El1, there is no communication with the blue Div

what should happen? when i click on that element, it auto scrolls to the right corner of the blue div element.

See:

it should not go to the top must go to the blue div by 1200 pixels in the right
that’s not working example http://jinvertscroll-d77b6179296-685719fd57afe.webflow.io/

Ah k, now i see the prob.
Investigating.

But before I see that you have set two duplicate data-values:

This wont fix the problem, but its a start :stuck_out_tongue_winking_eye:

Your problem is that you named your div classes wrong.

The script is looking for a div called .scroll, but you entered die classes “horizon + scroll” in a row. What webflow does is that it creates a dash between those items like “horizon-scroll”. But now the script cant reference that class anymore.

You need to give your divs first the class “horizon”, and then add the second class “scroll”.

See whats wrong:

It should look like this:

Regards
Daniel

Here you ll have a short idea of what to do. You must remember your old values though … :).

Daniel, thank you so much, I’ll fix it. I hope I will succeed :slight_smile:

Hope it helps…dont know cause i cant test it … but fingers crossed

p.s. here are the correct values for "div class=“front scroll”:

Class front:
z-index: 1000;
width: 6000px;

Class scroll:
position: fixed;
bottom: 0;
left: 0;

AND be sure to edit these lines as well:

$.jInvertScroll(['.horizon.scroll','middle.scroll','front.scroll']);

1 Like

I corrected, but did not help,
http://jinvertscroll-d77b6179296-685719fd57afe.webflow.io/
I did that the site can be cloned
https://webflow.com/website/jinvertscroll-d77b6179296-685719fd57afe?s=jinvertscroll-d77b6179296-685719fd57afe![|690x422](upload://rKeKsEV9lesqY5aiKEyfZfvFlzD.gif)

Yeah there must be somethin wrong with the css… I ll evaluate that tomorrow…

I also dont get a solution. Since i build everything as seen in the horizontal example, it still wont work.
Only solution could be that there is some script or behaviour with a webflow.js that prevents that from working…i dont know.

very strange, I also tried everything :sweat: