.scroll（）适用于codepen但不在我的Electron Vue应用程序中

Question

scrollToTop方法适用于this codepen，但当我在我的应用中使用它时（使用单个文件组件），当我点击@click="scrollToTop"按钮时，它会抛出这两个错误：< / p>

[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）这个div围绕着v-container：

<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>

P.S。

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

Answer 1

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

同时您可以使用smooth scroll polyfill：

npm install smoothscroll-polyfill

在App.vue中：

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