Comments (2)
Hi @tedc,
Not sure if I get what you mean. Do you want to have a horizontal scroll but while using a vertical and native scrollbar? What you need to do is just extends smooth-scrolling
with these options:
const scroll = new Custom({
native: true,
direction: 'vertical'
})
And then, on the run function, just apply a translateX instead of translateY so the section will move from left to right while your native scrollbar will move from top to bottom.
this.dom.section.style[this.prefix] = `translate3d(${this.vars.current * -1}px,0,0)`
Be sure that you have this css applied to your body, otherwise you won't be able to scroll natively;
body {
overflow-y: scroll;
overflow-x: hidden;
}
The trick is to apply the max scrolling value (this.vars.bounding
) as the height of this.dom.scroll
(inside of the resize function). Because of that, the user can scrolls vertically because of this element going outside of the viewport bounds.
See commit #76f3dd4 for the details.
Hope it helps!
from smooth-scrolling.
I knew that it wasn't simple to explain, so I try again.
Imagine a site split in two parts in vertical, a header and a carousel (just like build in amsterdam). The carousel starts scrolling in horizontal way when is in view (it has a height of 100vh). When the user scroll back in the carousel, if he is at position 0, he can also go back to the header of the website, otherwise, he scrolls along the carousel.
Hope it's more clear.
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.