Click the button to scroll the page to a fixed value

on resistive touch screen devices, because sliding is very inflexible, buttons are set on the page to turn the page or slide the page.

for example: the height of visual area An is 500px, the height of scrollable area B is 1000px, and then there is a button, click the button, area B scrolls down 200px, each click, always scrolls down 200px. how can this be achieved? The premise is that this is a project written in vue, not jquery.

.warpper {
    width: 500px;
    height: 500px;
    overflow-y: scroll;
}
.con {
    height: 1000px;
    width: 100%;
}
Mar.16,2021

window.scroll (x answer y);


after testing, it is found that the scrollBy () method can scroll a fixed distance, for example:

this.$refs.apple.scrollBy(0, 200)
Menu