无法捕获vue.js组件中的滚动事件

我有这个

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

---

它可以通过点击内容轻松调用，但不能通过滚动内容调用。为什么？注意。

为了触发

v-on:scroll

，元素首先需要溢出并声明滚动样式

尝试这样做：

---

这应该向您展示概念证明。当您在

div

中滚动时，您应该会看到正在记录的消息。

通过使用md标签和md标签包装内容解决了此问题。在我的情况下，为了实现滚动事件触发，我将上面的代码更改为：

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

据我所知，为包含相关css样式的包装内容提供滚动可能性（溢出）。

.md对话框内容{padding:0 24px 24px；flex:1；flex basis:auto；overflow:auto；position:relative；}

这出现在上面代码的开发工具中我尝试过这个解决方案，但不幸的是，它也没有帮助，同样，点击事件停止触发。

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