This script is functioning well, but I would like to adapt it to scroll vertically instead of horizontally. I have tried changing all of the scrollLeft to scrollTop, ScrollWidth to ScrollHeight, and overflow-x to overflow-y, but without any success. Any help is greatly appreciated.

```js
const flavoursContainer = document.getElementById("flavoursContainer");
const flavoursScrollWidth = flavoursContainer.scrollWidth;
let speed = 1;

window.addEventListener("load", () => {
  self.setInterval(() => {
    if (flavoursContainer.scrollLeft !== flavoursScrollWidth) {
      flavoursContainer.scrollTo(flavoursContainer.scrollLeft + speed, 0);
    }
  }, 17);
});

function myFunction() {
  flavoursContainer.scrollLeft = 0;
  document.getElementById("the-numbers").innerHTML =
    "25 50 75 100 125 150 175 200";
}

function test() {
  flavoursContainer.scrollLeft = 0;
  document.getElementById("the-numbers").innerHTML =
    "11 21 31 41 51 61 71 81 91 101";
}

function increaseSpeed() {
  speed++;
}

function decreaseSpeed() {
  if (speed > 1) {
    speed--;
  }
}
```

```css
body {
  padding: 40px;
  font-size: 30px;
  line-height: 2em;
}

.container {
  width: 150px;
  overflow-x: scroll;
  white-space: nowrap;
  word-spacing: 30px;
}
```

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div class="container" id="flavoursContainer">
    <div id="the-numbers">1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</div>
  </div>
  <div onclick="myFunction()">Change</div>
  <div onclick="test()">Change again</div>
  <button onclick="decreaseSpeed()">-</button>
  <button onclick="increaseSpeed()">+</button>
</body>

</html>
```