Vue 如何不让背景滚动？

有一个 class 为 layer 的 div, 使用了 v-on:touchmove.prevent ，应该阻止了背景滚动，可是背景列表还是会滚动，求解，代码如下。

<template>
  <div id="app">
    <!--<my-button @click.native="buttonClick"></my-button>-->
    <img src="./assets/logo.png">
    <!--<router-view></router-view>-->
    <ul>
      <li v-for="item in list">
        <h1>{{ item }}</h1>
      </li>
    </ul>
    <div class="layer" v-on:touchmove.prevent></div>
  </div>
</template>

<script>
// import myButton from '@/components/MyButton.vue'
export default {
  // components: {
  //   myButton
  // },
  data () {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  methods: {
    buttonClick () {
      alert('原生点击')
    }
  },
  name: 'app'
}
</script>

<style>
body, html {width: 100%; height: 100%}
h1{margin-top:10rem;}
.layer{width:100%;height: 100%;position: fixed;top:0;left:0;z-index: 99;background:rgba(0, 0, 0, 0.5)}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>