तालिका.पंक्तियों[सूचकांक].scrollIntoView() काम नहीं कर रहा

Question 1

मैं कोशिश कर रहा हूँ करने के लिए स्क्रॉल में एक विशेष पंक्ति के साथ एक मेज है; div के साथ-साथ table इसके अंदर दोनों है overflow:auto. यह है मेरे कोड के लिए स्क्रॉल करने के लिए एक विशेष सूचकांक की तालिका:

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

यह मेरा html:

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

और मेरे सीएसएस:

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

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

पंक्तियों में मेरी मेज पर कर रहे हैं, गतिशील रूप से बनाया है, इसलिए वे नहीं कर रहे हैं hardcoded में html कोड. फिर भी, मेज से खाली नहीं है. किसी कारण के लिए, scrollIntoView() काम नहीं कर रहा है और मैं क्यों नहीं पता है. कृपया मदद.

संपादित करें: हैरत की बात है, जब मैं दूर behaviour और block तर्क है, तो यह काम करता है:

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

Question 2

यह प्रतीत होता है कि .scrollIntoView() काम करता है पर एक ठीक से संदर्भित तत्व है कि क्या गतिशील जोड़ा गया है या नहीं. नीचे दिए गए उदाहरण है 2 बटन यह साबित करना है.

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

यह प्रतीत होता है कि .scrollIntoView() काम करता है पर एक ठीक से संदर्भित तत्व है कि क्या गतिशील जोड़ा गया है या नहीं. नीचे दिए गए उदाहरण है 2 बटन यह साबित करना है.

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>

तालिका.पंक्तियों[सूचकांक].scrollIntoView() काम नहीं कर रहा

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में