Is there a way to make svgs reactive using javascript – Blancer.com Tutorials and projects

I am making a website that is designed to overflow to the left and right, even on desktops. To make this more ergonomic, I want to put svg arrows on the sides that scroll the page. However, when I move the mouse over them, nothing happens, even when I’ve declared the appropriate event listener (and tested it with other elements)

let arrow = document.getElementById("arrow");
arrow.onmouseenter = scroll;

function scroll() {
  window.scrollBy(-1000, 0);
}

#bigBox {
  min-width: 300vw;
}

#arrowHolder {
  position: sticky;
  width: 10vw;
}

svg {
  height: 7em;
  margin-top: calc(50vh - 3.5em);
}

<body>
  <div id="bigBox">
  </div>
  <div id="arrowHolder">
    <svg viewbox="0 0 200 300">
       <polygon id="arrow" points="0,150 200,0 200,300"/>
    </svg>
  </div>
</body>

Of course, answers should also work in other situations with other events and functions, as this is obviously far from the only potential use of javascript activating svgs