vant-popup在有滚动条的页面，弹出遮罩层时页面会滚动到顶部，求助怎么解决？

Question

<template>
  <div class="page">

    <van-form validate-first
              @submit="onSubmit">
      <div class="box">
        顶部
      </div>
      <van-cell is-link
                @click="showPopup">展示弹出层</van-cell>
      <van-popup v-model="show"
                 closeable
                 position="bottom"
                 :style="{ height: '30%' }"
                 get-container="body">内容</van-popup>

      <!-- 提交 -->
      <div style="margin: 16px;">
        <van-button round
                    block
                    type="info"
                    native-type="submit">
          提交
        </van-button>
      </div>

    </van-form>

  </div>
</template>

<script>
import { Form, Popup, Button, Cell } from 'vant'

export default {
  components: {
    [Form.name]: Form,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [Cell.name]: Cell
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    onSubmit (values) {
      console.log('submit', values)
    },
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  height: 1500px;
}
</style>

Answer 1

html,body,#app {
    height: 100%;
}
设置高度为100%时，超出一屏会出现这个问题

Answer 2

先获取当前滚动条位置 getScrollTop(), 隐藏遮罩的时候 window.scrollTo(0, getScrollTop())。

getScrollTop () {
        let scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }