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 hacer 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>) } 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 StackBlits
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. } 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. }Las referencias de cadenas dañan el rendimiento, no se pueden componer 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]
/* css */ html { scroll-behavior: smooth; }Queremos que la referencia se adjunte a un elemento dom, no a un componente de reacción. Entonces, al pasarlo a un componente secundario, no podemos nombrar la referencia de la propiedad.
const MyComponent = () => { const myRef = useRef(null) return <ChildComp refProp={myRef}></ChildComp> }Luego adjunte el accesorio de referencia 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>Simplemente busque la posición superior del elemento que ya ha determinado https://www.w3schools.com/Jsref/prop_element_offsettop.asp y luego desplácese a esta posición a través del método scrollTo https://www.w3schools.com/Jsref/met_win_scrollto. áspid
Algo como esto debería funcionar:
handleScrollToElement(event) { const tesNode = ReactDOM.findDOMNode(this.refs.test) if (some_logic){ window.scrollTo(0, tesNode.offsetTop); } } render() { return ( <div> <div ref="test"></div> </div>) }ACTUALIZAR:
desde React v16.3 se prefiere React.createRef()
constructor(props) { super(props); this.myRef = React.createRef(); } handleScrollToElement(event) { if (<some_logic>){ window.scrollTo(0, this.myRef.current.offsetTop); } } render() { return ( <div> <div ref={this.myRef}></div> </div>) }