使用鼠标垫或Magic Mouse在SPA中自定义滚动的问题

Question

我以幻灯片格式创建了SPA，应该为每个滚动事件更改页面。

但是我在使用这些设备时遇到了麻烦：

笔记本鼠标垫和Apple Magic Mouse鼠标：更改了几页，因为接下来触发了多个事件。

Apple Magic Mouse鼠标：由于惯性，在页面的开头和结尾都创建了白色边框。

这是我的应用程序的基本示例：

var app = new Vue({
    el: '#app',
    data: {
        page: 0,
        pages: [{bg: '#000000'},{bg: '#0000ff'},{bg: '#00ff00'},{bg: '#00ffff'},{bg: '#ff0000'},{bg: '#ff00ff'},{bg: '#ffff00'}],
        scrollEnabled: true
    },
    methods: {
        wheel: function (event) {

            if (app.scrollEnabled) {

                if (event.deltaY > 0) {
                    //next page
                    app.page = (app.page + 1 == app.pages.length) ? 0 : app.page + 1
                } else {
                    //previous page
                    app.page = app.page - 1 < 0 ? app.pages.length - 1 : app.page - 1
                }
                
                //block the scroll during the transition
                app.scrollEnabled = false;
                setTimeout(function () {
                    app.scrollEnabled = true
                }, 800);
            }
        }
    }
})

html, body, #app, .root, .content {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
}

.root: {
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0);
}

.bg-enter-active {
  animation-name: anim;
  animation-duration: .8s;
}

@keyframes anim {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <div class='root' @wheel='wheel'>
    <transition name='bg' duration='800'>
      <div v-for='(pg, idx) in pages' v-bind:key='idx' v-if="page == idx" v-bind:style="{'background-color': pg.bg}" class='content'></div>
    </transition>
  </div>
</div>

我该如何解决这个问题？