Horizontal Scrolling Example

[etiennejcharles]

Thanks for the amazing work!

I've been trying to make the horizontal scrolling work, and can't seem to do so ... I've been trying to reproduce the effect in http://www.buildinamsterdam.com

Could you in any way provide a working example? Thank you so much!

[baptistebriel]

Hi @etiennejcharles,

I just pushed another demo, you can already clone it and try it out! See commit #395d51f for the details.

This doesn't include a parallax effect inside the elements like on BIA, but I think you can just start with this. If you'd need to do that, it's just basically adding an extra div inside of each items, and applying transforms on it when the parent enters the viewport.

Hope it helps. Cheers!

[jesperlandberg]

Also trying to do this. Currently trying it by copying the demo, however I can't get the scrolling to work. Looks ok when inspecting.

https://puu.sh/ugxfT/f6c8c0f6b3.png

Is the custom script needed or can I just set the content inside vs-section to 200vw and direction to horizontal?

[jesperlandberg]

Do I have to do anything more then what is in the custom extend for horizontal? The demo doesn't work for me. (works on build in amsterdam tho, so shouldn't be my hardware).

[baptistebriel]

Hey @jesperlandberg, could you send me a demo link with your implementation of horizontal scrolling? I can give it a look.

[jesperlandberg]

@baptistebriel well it's pretty much exactly as in the demo=). I copied index.js and custom.js to my project, and installed the necessary dependencies for smooth (importing smooth gave me an error saying i cant invoke smooth without "new", but worked when I just copied the index file). The only thing that differs from the demo is that I'm setting the vs-div width in the CSS rather than in the custom.js file, so the style.width,transform,inline block is removed from my custom file.

Pretty much this:

.parent-to-vs-section{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
whitespace: nowrap;
overflow: hidden;
}

.vs-section{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
}

.vs-div{
display: inline-block;
width: 50%;
height: 100%;
}

plus index.js and custom.js from the horizontal demo.

here is a pen with the demo, which also isn't working for me (except when i swipe left on the trackpad). http://codepen.io/ReGGae/full/GWNMPe/

Would be awesome to get this working=)

[baptistebriel]

Yup, the codepen demo you provided will not work if you try to scroll vertically because it's listening for virtual-scroll's deltaX value.

You could have a look into the native-horizontal demo if you'd like to be able to transform your section on a x-axis while keeping a vertical scrolling behavior, including default browser's scrollbar.

Otherwise, you could listen to virtual-scroll's deltaY instead of deltaX when you're scrolling. That might be a useful option to add to the library...

In the calc function inside index.js, you can replace this line (106):

const delta = this.vars.direction == 'horizontal' ? e.deltaX : e.deltaY

...with this:

const delta = e.deltaY

Does that makes sense? Let me know if that's what you needed!

[jesperlandberg]

@baptistebriel

Indeed it does work by changing that line=) Thanks!

[philipyoungg]

@baptistebriel would love this in native. :)

[baptistebriel]

I'll think about adding an extra option to it. Will let you know here when a new version is up! @etiennejcharles was that what you were looking for as well?

[philipyoungg]

@baptistebriel I've read the code several times yesterday, and now getting hang of it. Mind if I send you PR for this feature? Would be my first chance to give back to web community!

[baptistebriel]

@philipyoungg feel free to post a PR if you want, that would be much appreciated! I guess we could just have an option like this.vars.listenTo = 'x' || 'y' || 'both' or something!