Streaming live at 10am (PST)

Section linking with horizontal scrolling


#1

link setting - a section in this page, not work correctly, does not scroll to the desired page
, http://jinvertscroll-d77b6179296-5c13656f654a7.webflow.io/#pageAbout , https://webflow.com/website/jinvertscroll-d77b6179296-5c13656f654a7


#2

Maybe this can help:


#3

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


#4

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.


#5

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


#6

Hi @hol1231, thanks for the link. Take a peek at this post that discusses how to get section linking to align properly: http://forum.webflow.com/t/getting-webflows-smooth-scroll-script-to-align-correctly-with-fixed-headers-navigation/3459

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.


#9

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:


#12

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 ? https://github.com/pixxelfactory/jInvertScroll/issues/15 ,Here is my example of a non-working https://webflow.com/website/jinvertscroll-d77b6179296-9a12ee0cd7e55


#13

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


#14

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


#15

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

See:


#16

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/


#17

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:


#18

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


#19

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


#20

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


#21

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


#22

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']);


#23

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


#24

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