Quiero hacer que el div siempre se desplace hasta el final del contenido. Mi solución funciona para textarea , pero no funciona para div y no sé por qué.
Tengo el siguiente código:
Usando textarea :
var i = 0; var txt = 'Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]' function type(){ if (i < txt.length) { document.querySelector('textarea').scrollTop = document.querySelector('textarea').scrollHeight document.querySelector('textarea').innerHTML += txt.charAt(i); i++; setTimeout(type,1) } } type() <textarea ></textarea> Usando div :
var i = 0; var txt = 'Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]' function type(){ if (i < txt.length) { document.querySelector('div').scrollTop = document.querySelector('div').scrollHeight document.querySelector('div').innerHTML += txt.charAt(i); i++; setTimeout(type,1) } } type() div{ width:100px; height:100px; } <div></div> Encuentro que si uso un área de textarea en lugar de usar un div , scrollTop = scrollHeight funcionará y siempre se desplazará hacia abajo, pero si uso div , no funcionará.
¿Alguien podría explicarme por qué esto no funciona?
Configurar el desbordamiento de su div para desplazarse cambiará su comportamiento para que coincida con el área de texto.
div { width:100px; height:100px; overflow: scroll; }¿Es así como querías que respondiera el div?
Esta solución utiliza una promesa para desplazar la ventana después de que el contenido se escriba en el div. El div no se desplazará porque su propiedad de desbordamiento no está configurada para desplazarse. El valor predeterminado es visible.
var txt = 'Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]' const divEl = document.querySelector('div'); function type(i, resolve, reject){ if (i < txt.length) { divEl.innerHTML += txt.charAt(i); i++; setTimeout(()=> type(i,resolve,reject),1) } else { resolve(); } } async function writeContent() { await new Promise((resolve, reject) => { type(1, resolve, reject); }); window.scrollTo({ top: divEl.scrollHeight, left: 0, behavior: 'smooth' }); } writeContent(); div{ width:100px; height:100px; } <div></div>