Tabela.wiersze[indeks].scrollIntoView() nie działa

Question 1

Próbuję przewinąć określony wiersz tabeli; w div wraz z table wewnątrz niego obie mają overflow:auto. To jest mój kod, aby przewinąć do określonego indeksu tabeli:

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

To jest mój kod html:

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

I mój css:

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

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

Wiersze w mojej tabeli są generowane dynamicznie, więc nie są zakodowane w moim kodzie html. Tym nie mniej, stół nie jest pusty. Z jakiegoś powodu, w scrollIntoView() nie działa i nie wiem dlaczego. Proszę, pomóż.

EDIT: Dziwne, ale gdy usuwam behaviour i block argumenty, wtedy to działa:

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

Question 2

Wygląda na to, że .scrollIntoView() działa z prawidłowo określonym elementem, niezależnie od tego, dodano dynamiczny element, czy nie. W poniższym przykładzie mamy 2 przyciski potwierdzające to.

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

Wygląda na to, że .scrollIntoView() działa z prawidłowo określonym elementem, niezależnie od tego, dodano dynamiczny element, czy nie. W poniższym przykładzie mamy 2 przyciski potwierdzające to.

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>

Tabela.wiersze[indeks].scrollIntoView() nie działa

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii