What is the contexte ?
I have a website, which is a single page, where I will present my activity and projects After scrolling few sections we have a projects in a row.
What I want to do ?
I wanna swap the vertical scroll to horizonta when we arrive to my projects row. When you are at the end of the row it just has to get back to normal with a vertical scroll.
The code
<div className="projectsContainer"> // <--- height 100vh
<div className="row projects"> // <--- Positioned in the middle of the parent ↑
<project1 />
<project2 />
<project3 />
<project4 />
<project5 />
</div>
</div>
What is my code ? And what I thought
I have a method inTheMiddle() which is boolean.
If <div className="row projects"> is in the middle of the viewport it returns true else false.
A method scrollDirection() which is boolean too, true when scroll goes down false when it is goes up.
Many different method disableScroll() The last disableScroll() method cancel the scroll by re-calculating it
componentDidMount() {
window.addEventListener('wheel', (this.handleScroll));
}
...
disableScroll() {
// Get the current page scroll position
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
// if any scroll is attempted, set this to the previous value
window.onscroll = () => {
window.scrollTo(scrollLeft, scrollTop);
};
}
And my handleScroll() method which manage all that
handleScroll(event) {
const rowProjects = document.querySelector(".row.projects")
const projectsContainer = document.querySelector(".projectsContainer")
const isSticky = rowProjects.classList.contains("sticky")
// isSticky is useless now was try by adding position fixed and no need to use disableScroll()
if (this.inTheMiddle() && this.state.scrollDown && this.state.count < 1400 ) {
this.disableScroll()
this.setState({ count: this.state.count + 10 })
rowProjects.scroll(this.state.count, 0)
} else if ((!this.state.scrollDown) && this.state.count > 0) {
this.setState({ count: this.state.count - 10 })
rowProjects.scroll(this.state.count, 0)
}
}
What I cannot manage is to get back to normal. When you arrive at the end of the row I cannot re-able the scroll nor when I scroll up to the top of the page. It stuck on the projects row.
I managed it with isSticky I removed disableScroll() and add a class with position fixed but the problem was that it bounced. Because when it is in the middle i fixed in the middle of the viewport so the element is no longer in position relative so it bounced like a glitch (like taking off a block of a stack block) sorry for the bad exemple :')
If you have any idea to help me it would be very kind. I am scratching my head for 3 days and I still did not find the perfect solution.
