无法在 vue.js 组件中捕获滚动事件答案

【问题标题】：Cannot catch scroll-event in vue.js component无法在 vue.js 组件中捕获滚动事件
【发布时间】：2020-05-02 08:21:52
【问题描述】：

我有这个。

<template>
    <md-dialog :md-active.sync="show"
               @md-closed="hideModal"
               @md-clicked-outside="hideModal"
               class="modal-tabs"
               @keypress.enter.prevent="handleEnter"
    >
        <md-dialog-content ref="my-modal" v-on:scroll.native="handleScrolling" @click.native="handleScrolling">
            <!--content-->
        </md-dialog-content>
    </md-dialog>
</template>

和处理函数是

handleScrolling(): void {
    console.log('scroll is on');
    this.$root.$emit('scrollingModal', this.$refs['my-modal'].$el.scrollTop);
}

通过点击内容很容易调用，但不能通过滚动内容调用。为什么？问候。

【问题讨论】：

标签： vue.js vue-component

【解决方案1】：

为了触发v-on:scroll，元素首先需要通过声明的滚动样式溢出。

尝试这样做：

<div style="max-height: 300px; overflow: scroll;" v-on:scroll="handleScrolling()">
    <md-dialog-content ref="my-modal" @click.native="handleScrolling">
            <!--content-->
    </md-dialog-content>
</div>

这应该向您展示概念证明。当您在 div 中滚动时，您应该会看到正在记录的消息。

【讨论】：

据我所知为包含相关 css 样式（溢出）的包装内容提供滚动可能性。
.md-dialog-content { padding: 0 24px 24px; flex: 1; flex-basis: auto; overflow: auto; position: relative; } 这出现在上面代码的开发工具中
我已经尝试过这个解决方案，但不幸的是，它没有帮助，而且，点击事件停止触发。

【解决方案2】：

这个问题通过用 md-tabs 和 md-tab 标签包裹 content 解决了。就我而言，为了实现滚动事件触发，我将上面的代码更改为：

<template>
    <md-dialog :md-active.sync="show"
               @md-closed="hideModal"
               @md-clicked-outside="hideModal"
               class="modal-tabs"
               @keypress.enter.prevent="handleEnter"
    >
        <md-dialog-content ref="edit-contact-modal" v-on:scroll.native="handleScrolling">
            <md-tabs>
                <md-tab><!--here md-tab in fact is first custom div of mine-->
                    <!--content-->
                </md-tab>
            </md-tabs>
        </md-dialog-content>
    </md-dialog>
</template>

【讨论】：