CODEWITHSUNDEEP
vue.jsvuejs3
Ratbwoi
Ratbwoi

Reputation: 102

Vue v-on:scroll issue

I need that depending on the window.scrollY position, the slot will be displayed before or after the div. So basically I have a "box" that when its clicked will show the slot below if there is enough space, or on top if there is not.

I have this template:

<template
    v-on:scroll="fooFunction"
>
    <div class="foo" @click="isOpened = !isOpened" > </div>
    <slot v-if="isOpened">Default Slot Content</slot>
</template>

I've tried

v-on:scroll 
v-on:scroll.passive
@scroll
window.addEventListener('scroll', (e) => {})

and nothing seems to work.

Can someone please help me out with it?

Thanks!

Upvotes: 1

Views: 3455

Answers (1)

Niklesh Raut
Niklesh Raut

Reputation: 34914

scroll binding is not fetched by vue/browser, it means scroll event it is removed when loading in DOM. check below example.

Vue.component('example', {
  props:['content'],
  template: "<div>{{content}}</div>"
});
var app = new Vue({
  el: "#app",
  methods :{
    fooFunction1: function () {
      console.log("fooFunction1 will work");
    },
    fooFunction2: function () {
      console.log("fooFunction2 will not work");
    }
  },
  data : {
    content: "I need that depending on the window.scrollY position, the slot will be displayed before or after the div. So basically I have a 'box' that when its clicked will show the slot below if there is enough space, or on top if there is not."
  }
});
.data-container {
  width: 100px;
  height: 200px;
  overflow: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="data-container" @scroll="fooFunction1">
    <Example @scroll="fooFunction2" :content="content" />
  </div>
</div>

You can take a look for better understand about template tag here: https://www.webcomponents.org/community/articles/introduction-to-template-element

Upvotes: 1

Related Questions