Javascript: fonction de défilement exécutée sur un div

Question

J'ai un div avec overflow: scroll; Et je voudrais mettre un bouton. Lorsque vous appuyez dessus, le contenu de la div défile. 

Quelque chose comme:

function scrollDiv() {
  document.getElementById("d").scrollBy(100, 100);
}

<div id="d">
  <p>Click the button to scroll by 100px.</p>
  <button onclick="scrollDiv()">Click me to scroll!</button>
</div>

Cela fonctionne dans FF, mais pas dans Chrome. En Chrome je reçois

Uncaught TypeError: undefined n'est pas une fonction

La fonction scrollBy semble être définie comme étant la fonction window, donc je suppose que c'est le problème, et que cela fonctionne dans FF, pas par la norme.

Mais y a-t-il une autre façon de faire cela? Je n'utilise pas jQuery et je préférerais ne pas le faire.

Answer 1

Vous pouvez essayer ceci:

function scrollDiv(){
    document.getElementById("d").scrollTop += 100;
    document.getElementById("d").scrollLeft += 100;
}

Answer 2

Plutôt que de faire 

function scrollDiv(){
   document.getElementById("d").scrollTop += 100;
   document.getElementById("d").scrollLeft += 100;
}

ne ferais-tu pas

document.getElementById("d").scrollBy({
   top: 100,
   left: 100,
   behaviour: 'smooth'
})