Estoy tratando de desplazarme a una fila particular de una tabla; el div junto con la table que contiene, ambos tienen overflow:auto . Este es mi código para desplazarme a un índice particular de la tabla:
var table1 = document.getElementById("old_table"); table1.rows[3].scrollIntoView({ behavior: 'smooth', block: 'center' });Este es mi html :
<div id="old_slab"><table id="old_table" border="2"></table></div>Y mi CSS :
#old_slab{ position: absolute; top:34em; left:30em; width:40em; height: 15em; overflow: auto; } #old_table{ height: 15em; overflow: auto; width: 40em; } Las filas en mi tabla se crean dinámicamente, por lo tanto, no están codificadas en mi código html. Sin embargo, la mesa no está vacía . Por alguna razón, scrollIntoView() no funciona y no sé por qué. Por favor ayuda.
EDITAR: Extrañamente, cuando elimino el behaviour y block los argumentos, entonces funciona:
table1.rows[3].scrollIntoView(true);Parece que .scrollIntoView() funciona en un elemento al que se hace referencia correctamente, ya sea que se agregue dinámicamente o no. El siguiente ejemplo tiene 2 botones que lo prueban.
const scrollToRow = (selector, index) => { const table = document.querySelector(selector); const row = table.rows; row[index].scrollIntoView({ behavior: 'smooth', block: 'center' }); }; document.querySelector('.scroll').onclick = function(e) { scrollToRow('table', 3); } /* The following code is to simulate dynamically added rows */ const addRow = selector => { const table = document.querySelector('table'); const row = table.insertRow(0); const cell = row.insertCell(0); cell.colSpan = 2; }; document.querySelector('.add').onclick = function() { addRow('table'); }; section { width: 40em; height: 15em; padding: 10% } table { height: 15em; width: 40em; border: 2px solid black } td { border: 2px solid black; } td::before { content: '\a0'; } button { display: inline-block; margin-bottom: 30%; } <button class='add'>Add Row</button> <button class='scroll'>Scroll to Row 4</button> <section> <table> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> <section>