Question

我正在尝试侦听特定元素内的滚动事件，但似乎无法在创建的函数内正常工作，下面是我的尝试，这是小提琴https://jsfiddle.net/mejuliver/8hxrt9eq/18/尝试取消注释在vue实例外部滚动事件，您会知道

new Vue({
  el : '#vueapp',
  data : {
    showSearchBar : 0
  },
  created(){
    const _self = this;

    document.querySelector('#app').onscroll = function() {

    alert();

        if(document.querySelector('#app').scrollTop >= 10) {
            _self.showSearchBar = 1;
        }else{
            _self.showSearchBar = 0;
        }
    }
    // --
  }
});

有什么帮助，有想法吗？

Answer 1

在将事件处理程序移至mounted时（如Sovalina在评论中建议的那样）有效，但这不是Vue的方法。

使用Vue，您应该将事件处理程序信息嵌入html模板中：

（基于您在jsfiddle上发布的代码）

<div id="vueapp">
    <div id="app" @scroll="handleScroll">
    </div>
</div>

JavaScript：

new Vue({
    el : '#vueapp',
    data : {
        showSearchBar : 0
    },
    methods: {
        handleScroll(evt) {
            if(evt.target.scrollTop >= 10) {
                this.showSearchBar = 1;
            }else{
                this.showSearchBar = 0;
            }
        }
    },
});

在创建的函数内调用元素的onscroll事件

1 个答案: