.scroll() 适用于 codepen，但不适用于我的 Electron Vue 应用程序

Question

scrollToTop 方法在 this codepen 中有效，但是当我在我的应用程序中使用它（使用单个文件组件）时，当我点击带有 @click="scrollToTop" 的按钮时，它会抛出这两个错误：

[Vue warn]: Error in event handler for "click": "TypeError: this.$refs.scrollContainer.scroll is not a function"

TypeError: this.$refs.scrollContainer.scroll is not a function

---

更新

有人可以复制吗？我从this boilerplate 创建了一个新项目，我在那里得到了相同的结果

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init vuetifyjs/electron my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

有人可以尝试通过创建一个测试项目来重现它，并将以下代码添加到 App.vue 中：

1) 添加这个 CSS

html {
  overflow: hidden;
}
.content {
  max-height: 100vh;
}
.scrollContainer {
  height: 100%;
  overflow-y: scroll;
  backface-visibility: hidden;
}

2) 这种方法：

methods: {
  scrollToTop () {
      console.log(this.$refs.scrollContainer)

      return this.$refs.scrollContainer.scroll ({
        top: 0, 
        behavior: 'smooth' 
      })
  }
}

3) 这个围绕 v-container 的 div：

<div class="scrollContainer" ref="scrollContainer">

</div>

4) 和按钮：

<v-btn fab 
       dark 
       fixed bottom right 
       @click="scrollToTop"  ref="button">
  <v-icon>keyboard_arrow_up</v-icon>
</v-btn>

---

附言

当我将console.log(this.$refs.scrollContainer) 添加到scrollToTop 函数中时，我会在控制台中获得该元素：

Answer 1

Electron 1.8.2 is based on Chrome 59.0.3071.115，具有相对较新的"Scroll Behavior" 规范的partial support（包括您正在使用的Element.scroll() 方法）。

同时你可以使用smooth scroll polyfill:

npm install smoothscroll-polyfill

在 App.vue 中：

require('smoothscroll-polyfill').polyfill();