点击按钮，使页面滚动固定值

Question

电阻式触屏设备上，因为滑动很不灵活，所以页面上会设置按钮来翻页或者滑动页面。

例如：可视区域A高度为500px，里面的内容即可滚动区域B高度为1000px，然后有一个按钮，点击按钮，B区域向下滚动200px，每点一下，都固定向下滚动200px，这个怎么实现呢？前提是这是用vue 写的项目，没有用jquery。

<template>

<div>

    <div class="wrapper" ref="apple">

        <div class="con"></div>

    </div>

    <button @click="handleClick">向下滑动</button>

</div>

</template>

export default {

    methods: {

        handleClick () {

            this.$refs.apple.scroll(0, 200)

        }

    }

}

.warpper {

    width: 500px;

    height: 500px;

    overflow-y: scroll;

}

.con {

    height: 1000px;

    width: 100%;

}

Answer 1

经过测试，发现 scrollBy() 这个方法可以滚动固定距离，例如：this.$refs.apple.scrollBy(0,&nbsp;200)

Answer 2

window.scroll(x,y);