¿Cómo desplazarse a un elemento?
Tengo un widget de chat que muestra una serie de mensajes cada vez que me desplazo hacia arriba. El problema al que me enfrento ahora es que el control deslizante permanece fijo en la parte superior cuando se cargan los mensajes. Quiero que se centre en el último elemento de índice de la matriz anterior. Descubrí que puedo crear referencias dinámicas pasando el índice, pero también necesitaría saber qué tipo de función de desplazamiento usar para lograrlo.
handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
if (some_logic){
//scroll to testNode
}
}
render() {
return (
<div>
<div ref="test"></div>
</div>)
}
React 16.8+, componente funcional
const ScrollDemo = () => {
const myRef = useRef(null)
const executeScroll = () => myRef.current.scrollIntoView()
// run this function from an event handler or an effect to execute scroll
return (
<>
<div ref={myRef}>Element to scroll to</div>
<button onClick={executeScroll}> Click to scroll </button>
</>
)
}
Haga clic aquí para ver una demostración completa de StackBlitz
React 16.3+, componente de clase
class ReadyToScroll extends Component {
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
return <div ref={this.myRef}>Element to scroll to</div>
}
executeScroll = () => this.myRef.current.scrollIntoView()
// run this method to execute scrolling.
}
Componente de clase: devolución de llamada de referencia
class ReadyToScroll extends Component {
render() {
return <div ref={ (ref) => this.myRef=ref }>Element to scroll to</div>
}
executeScroll = () => this.myRef.scrollIntoView()
// run this method to execute scrolling.
}
No utilice referencias de cadena.
Las referencias de cadena perjudican el rendimiento, no son componibles y están a punto de desaparecer (agosto de 2018).
Las referencias de cadena tienen algunos problemas, se consideran heredadas y es probable que se eliminen en una de las versiones futuras. [Documentación oficial de React]
recurso1 recurso2
Opcional: animación de desplazamiento suave
/* css */
html {
scroll-behavior: smooth;
}
Pasar referencia a un niño
Queremos que la referencia esté adjunta a un elemento dom, no a un componente de reacción. Entonces, cuando lo pasamos a un componente secundario, no podemos nombrar la referencia de propiedad.
const MyComponent = () => {
const myRef = useRef(null)
return <ChildComp refProp={myRef}></ChildComp>
}
Luego conecte el accesorio ref a un elemento dom.
const ChildComp = (props) => {
return <div ref={props.refProp} />
}
esto funcionó para mí
this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
EDITAR: Quería ampliar esto en función de los comentarios.
const scrollTo = (ref) => {
if (ref && ref.current /* + other conditions */) {
ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
}
<div ref={scrollTo}>Item</div>
