Comments (11)
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!
from smooth-scrolling.
@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=)
from smooth-scrolling.
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!
from smooth-scrolling.
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?
from smooth-scrolling.
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).
from smooth-scrolling.
Hey @jesperlandberg, could you send me a demo link with your implementation of horizontal scrolling? I can give it a look.
from smooth-scrolling.
Indeed it does work by changing that line=) Thanks!
from smooth-scrolling.
@baptistebriel would love this in native. :)
from smooth-scrolling.
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?
from smooth-scrolling.
@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!
from smooth-scrolling.
@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!
from smooth-scrolling.
Related Issues (20)
- Horizontal scroll demos not working HOT 2
- (Parallax demo) vs-scrollbar-smooth and vs-scrollbar-parallax got different scroll position after smooth.scrollTo
- Build version including parallax HOT 4
- Empty space at page bottom when transitioning page HOT 2
- Has the latest version been published to NPM? HOT 2
- scrollTo() after resize HOT 2
- Cannot find module 'babelify'
- Next.js Compatibility HOT 2
- Immediately set the scroll position HOT 2
- How to implement with GSAP ScrollTrigger HOT 17
- Scroll event on container not working
- Hiding the scroll thumb when content doesn't extend beyond viewport. HOT 4
- Scrolling section responsive
- Uncaught TypeError: Class constructor Smooth cannot be invoked without 'new' HOT 1
- Error when building HOT 1
- StickySidebar with Smooth-Scroll
- Use native touch scrolling? HOT 6
- Smooth.resize() when using native gives error. HOT 1
- Custom easing function? HOT 1
- Horizontal scroll demo with both Y and X scrolling HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from smooth-scrolling.