The goal is to be able to scroll vertically and horizontally at the same for both components. when scrolling down the page, purple component should scroll down, and the horizontally component, blue and green, should be scrolling to the left at the same time fixed at its place. I cant figure how accomplish this using React.
import React from 'react'
import "./horzantalComponent.css"
const HorzantalComponent = () => {
return (
<div>
<div className="page">
<div className='horizantalContainer'>
<div className='wrapper'>
<div className='slide' style={{display:'flex', justifyContent:'flex-end'}}> <p>Horizantal Slide component slide</p> </div>
<div className='slide'> </div>
<div className='slide'></div>
</div>
</div>
</div>
</div>
)
}
export default HorzantalComponent.page{
height: 300vh;
background-color: purple;
z-index: 300;
}
.horizantalContainer{
/* margin-top: 100px; */
background-color: blue;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
height: 100vw;
width: 35vh;
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
z-index: 200;
}
.slide{
height: 35vh;
width: 100vw;
}
.slide:nth-child(1){
background-color: lightblue;
}
.slide:nth-child(2){
background-color: lightgreen;
}
.slide:nth-child(3){
background-color: lightpink;
}
.wrapper{
display: flex;
width:300vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
background-color: #333;
/* added */
position: fixed;
left:-65vh;
}