Why is Vue's @scroll event not firing?

D

danilr2019-06-10 19:17:51

Vue.js

danilr, 2019-06-10 19:17:51

Why is Vue's @scroll event not firing? And how to make it work?
Here is the document, root is the Vue scope

<body>
    <div id="root">
    <div @scroll="hideHeader" class="all-wrapper">
            <div class='header-sticky' :class="{'header-show': isShowHeader}">
                    <div class="logo">

new Vue({
    el: root,
    data:{
        isAdvantageMore: false,
        currentAdv: '',
        isShowHeader: true
    },
    methods:{
        openAdvantageMore(value){
            this.isAdvantageMore = !this.isAdvantageMore;
            this.currentAdv = value;
            document.body.style.overflow = this.isAdvantageMore? "hidden" : "auto";
        },
        hideHeader(){
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            this.isShowHeader = scrollTop > 100 ? false : true;
            console.log(this.isShowHeader);
        }
    }
});

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-06-10
@danilr

Make sure the handler is actually assigned to the element that is scrolling, and not to any of its child elements. Make sure the overflow: scrollor property is set on this element overflow-y: scroll.