0
191
VistasDesplazamiento vertical y horizontal síncrono para dos componentes usando React
El objetivo es poder desplazarse vertical y horizontalmente al mismo tiempo para ambos componentes. al desplazarse hacia abajo en la página, el componente morado debe desplazarse hacia abajo, y el componente horizontal, azul y verde, debe desplazarse hacia la izquierda al mismo tiempo fijo en su lugar. No puedo entender cómo lograr esto usando 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; }
·
Juan Pablo Isaza
Responde la pregunta