Table.les rangées[index].scrollIntoView() ne fonctionne pas

Question 1

Je suis en train de défiler dans une ligne particulière d'une table; le div avec l' table à l'intérieur, les deux ont overflow:auto. C'est mon code pour le défilement à un indice particulier de la table:

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

C'est mon html:

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

Et mon css:

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

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

Les lignes de mon tableau sont créées dynamiquement, par conséquent, ils ne sont pas codées en dur dans mon code html. Néanmoins, le tableau n'est pas vide. Pour une raison quelconque, le scrollIntoView() ne fonctionne pas et je ne sais pas pourquoi. S'il vous plaît aider.

EDIT: Bizarrement, quand j'enlève le behaviour et block les arguments, puis il travaille:

table1.rows[3].scrollIntoView(true);

Question 2

Il semble que .scrollIntoView() travaux sur un bien référencé élément si dynamique ajouté ou non. L'exemple ci-dessous a 2 boutons prouver.

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>

zer00ne · Answer 1 · 2021-11-24T10:49:57

Il semble que .scrollIntoView() travaux sur un bien référencé élément si dynamique ajouté ou non. L'exemple ci-dessous a 2 boutons prouver.

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>

Table.les rangées[index].scrollIntoView() ne fonctionne pas

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie