1

I'm trying to scroll to a particular card when a button is clicked. I'm using scrollIntoView for that, but its not working.

.js file :

document.getElementById("general_details_edit").addEventListener("click", function(){
  this.style.display = "none";
  document.getElementById("general_details_card").classList.remove("d-none");
  document.getElementById("general_details_card").classList.add("d-block");

  console.log("start");
  document.getElementById("general_details_card").scrollIntoView({behavior : 'smooth'});
  console.log("end")
  //not working

All of the other javascript code is working. How can i resolve this? I get the console messages "start" and "end" as well.

Also, when i run the same line from browser's console, it works.

EDIT :

Vijay's comment about using a timeout worked for me. But how i can wait for the element to load instead of waiting for a specific amount of time?

Current code :

const scroll = (el) => {
  setTimeout(function () { el.scrollIntoView( {behavior : 'smooth', block : 'end'}); }, 500);
}
Kabir Pathak
  • 41
  • 11
  • Hi. Welcome to SO! Please visit [How to Ask](https://stackoverflow.com/help/how-to-ask). Do some research, search for related topics on SO; if you get stuck, post a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your attempt, noting input and expected output, preferably in a [Stacksnippet](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) – Alexandre Elshobokshy Sep 07 '21 at 07:07
  • Try to run the code after some timeout after adding the 'd-block' class to element. the code ran before the element actually loaded into the dom – Vijay Kumawat Sep 07 '21 at 07:08
  • Does this answer your question? [How do I scroll to an element using JavaScript?](https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript) – mocha Sep 07 '21 at 07:12
  • Take a look at this issue: https://stackoverflow.com/questions/5007530/how-do-i-scroll-to-an-element-using-javascript – mocha Sep 07 '21 at 07:12
  • @VijayKumawat thanks for that. Setting a timeout worked for me, but currently the wait length is hardcoded. How can I make it such that the timeout will wait until the element is loaded in the dom? – Kabir Pathak Sep 07 '21 at 07:56
  • Can be done, please checkout this answer if that can help, https://stackoverflow.com/questions/34863788/how-to-check-if-an-element-has-been-loaded-on-a-page-before-running-a-script/34864115#34864115 otherwise 100ms timeout would be sufficient, it won't cause any issues. – Vijay Kumawat Sep 07 '21 at 08:03

1 Answers1

1

One way would be to change the waiting time to zero milliseconds once the DOM is fully loaded.

var mSeconds = 500;

window.addEventListener('DOMContentLoaded', function(event) {
  mSeconds = 0;
});

const scroll = (el) => {
  setTimeout(function () { 
    el.scrollIntoView( {behavior : 'smooth', block : 'end'});
  }, mSeconds);
  
}
Gass
  • 7,536
  • 3
  • 37
  • 41