0
163
VistasCopie el valor scrollTop de textarea a div
Tengo un div y un área de texto dentro de un div principal. Estoy tratando de copiar el valor scrollTop del área de texto en el div para que se mueva sincronizado con el desplazamiento del área de texto.
El problema parece ser que cuando agrego texto en el área de texto y luego presiono Intro para una nueva línea, el valor div scrollTop no parece actualizarse, pero el valor de scrollTop del área de texto sí lo hace.
Si vuelvo a pulsar Intro, ambos valores se actualizan, pero parece que el valor div scrollTop está un paso por detrás del área de texto
https://codesandbox.io/s/objective-feather-ngq8t
handleScroll = (e) => { setTextareaScrollTop(e.target.scrollTop); e.target.previousElementSibling.scrollTop = e.target.scrollTop; setDivScrollTop(e.target.previousElementSibling.scrollTop); }; 
2 Respuestas
Responde la pregunta0
Hice una modificación a tu código, https://codesandbox.io/s/empty-voice-7w3ze
const useUpdate = () => { const [, dispatch] = useState(0); const ref = useRef(() => { dispatch((v) => v + 1); }); return ref.current; };Y cuando necesite volver a pintar, simplemente hágalo
handleScroll = (e) => { e.target.previousElementSibling.scrollTop = e.target.scrollTop; refresh(); }; No respondí a su pregunta exactamente de acuerdo con lo que desea, pero me di cuenta de que setState no juega ningún papel, por lo que los eliminé a ambos y los reemplacé con useUpdate . Déjame saber lo que piensas sobre este enfoque.
Si elimino ambos setState que tenía antes, veo el problema que describió.
0
Una solución simple es eliminar setDivScrollTop de handleScroll y agregar una nueva línea \n después de configurar el texto del div rojo. Tenga en cuenta que este carácter actúa como un símbolo de intercalación y le permite seguir al otro div.
handleScroll = (e) => { setTextareaScrollTop(e.target.scrollTop); e.target.previousElementSibling.scrollTop = e.target.scrollTop; // setDivScrollTop(e.target.scrollTop); }; handleInput = (e) => { console.log(divScrollTop, textareaScrollTop) setText(e.target.value + "\n"); // add "\n" };Como se ve aquí, Codesandbox
También agregué estilo de borde al elemento del área de texto y spellCheck={false} para que sea posible ver que son iguales.