Tabella.righe[indice].scrollIntoView() non funziona

0

Domanda

Sto cercando di scorrere in una particolare riga di una tabella; il div insieme con il table all'interno di esso, entrambi hanno overflow:auto. Questo è il mio codice per lo scorrimento di un particolare indice della tabella:

var table1 = document.getElementById("old_table");
table1.rows[3].scrollIntoView({
    behavior: 'smooth',
    block: 'center'
});

Questo è il mio codice html:

<div id="old_slab"><table id="old_table" border="2"></table></div>

E il mio css:

#old_slab{
  position: absolute;
  top:34em;
  left:30em;
  width:40em;
  height: 15em;
  overflow: auto; 
}

#old_table{
  height: 15em;
  overflow: auto;
  width: 40em;
}

Le righe nella tabella vengono creati dinamicamente, quindi non sono hardcoded nel mio codice html. Tuttavia, la tabella non è vuoto. Per qualche ragione, l' scrollIntoView() non funziona e non so perché. Si prega di aiutare.

EDIT: Stranamente, quando ho tolto le behaviour e block argomenti, allora funziona:

table1.rows[3].scrollIntoView(true);
css html javascript
2021-11-24 05:33:46
1

Migliore risposta

0

Sembra che .scrollIntoView() funziona su un riferimento correttamente elemento se dinamico aggiunto o meno. L'esempio sotto ha 2 pulsanti di dimostrarlo.

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>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>
<section>

2021-11-24 10:49:57

In altre lingue

Questa pagina è in altre lingue

Русский
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................