Tengo una aplicación heredada que se ejecuta en modo de compatibilidad (IE11) en Edge Chromium. Hay una parte de la página que usa AJAX para actualizar automáticamente una tabla cada 10 segundos. Cuando los usuarios se desplazan por los resultados de la tabla, se actualiza automáticamente y pierden su lugar en la tabla. La renovación frecuente es necesaria debido a un entorno muy dinámico.
La "ventana.scrollTo(0,yElemnt);" no funciona porque intenta desplazar toda la ventana en lugar de la tabla alojada en TPicks.asp.
function ShowPicks(){ var elmnt = "" var yElmnt = 0 if (document.getElementById("scrollPicks")) { elmnt = document.getElementById("scrollPicks"); yElmnt = elmnt.scrollTop; } if (window.XMLHttpRequest) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("AutoPickDiv").innerHTML = this.responseText; if (document.getElementById("scrollPicks")) { alert(yElmnt); document.scrollTo(0,yElmnt); } } } } //alert("Picks.asp"); var RandNbr = Math.round(Math.random()*10000000); xmlhttp.open("POST", "TPicks.asp", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("rand=" + RandNbr);}
¿Cómo puedo hacer que solo la tabla se desplace? Tengo la posición de píxel de donde se desplaza actualmente la tabla dentro de "elmnt.scrollTop;". La alerta después de que la llamada AJAX regresa como completa muestra dónde también está la posición de desplazamiento actual: "alerta (yElmnt);".
¡Gracias por tu ayuda!
Su código está configurando document.scrollTop en el eje y cuando debería apuntar a algo diferente. Tienes que envolver tu tabla en un elemento que pueda, por ejemplo, un DIV. Luego, debe aplicar una propiedad CSS de height y overflow-y a ese elemento. Luego, necesita una función de javascript que pueda establecer la propiedad scrollTop de ese elemento en cero.
Consulte este jsfiddle para ver un ejemplo de trabajo: https://jsfiddle.net/bf4zngy7/
<div id="wrapper"> <div id="tablewrapper" style="max-height:100px; overflow-y:scroll"> <table border=1> <!-- insert your data rows here --> </table> </div> <div id="buttonwrapper"> <button type="button" onclick="scrollToTop()"">Scroll to top</button> </div> </div>Y cuando se hace clic en el botón, esta función se dispara:
function scrollToTop(){ const tablewrapper = document.getElementById('tablewrapper'); if(tablewrapper){ tablewrapper.scrollTop = 0; } }En mi solución, en realidad no está desplazando la tabla, sino el elemento que contiene la tabla. Consulte https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop para obtener más información sobre por qué funciona la configuración de la propiedad scrollTop del elemento.