ios safari preventing overflow-y will reset top on horizontal scroll

I want to make container only horizontally scrollable so I set overhflow-y to hidden. I added a button to scroll vertically with js (simulating pagination). After I press a button an try to scroll horizontally on android works but ios will reset vertical scroll to 0. Does anyone know how to fix that?

const scrollBtn = document.querySelector(".scroll");
const resetBtn = document.querySelector(".reset");
const container = document.querySelector(".container");

scrollBtn.addEventListener("click", () => {
  container.scrollTo({top:200})
})
resetBtn.addEventListener("click", () => {
  container.scrollTo({top:0})
})

.container {
  height: 300px;
  width: 300px;
  overflow: auto;
  overflow-y: hidden;
  background-color: red;
}

 p {
   background-color: orange;
   padding: 20px;
   margin: 20px;
   width: 600px;
}

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
</div>
<button class="scroll">Scroll to 200</button>
<button class="reset">Reset scroll</button>