Function only called once at beginning of created page

[KevinShianto]

i have a component like this

<div class="background-footer" style="z-index: 1" v-view="handleScroll">
 <!-- content -->
</div>

and my script function only do console.log().

Why is it only trigger once instead of every time i scroll down the screen ?
Not like how it works in demo, every time i scroll down, the component updating its view property

[adarshmadrecha]

What is the size of your component?
Share your code in function handleScroll

[kagankorkmaz]

I have the same issue. Function is only called when page is created,

[bartboersma]

Same issue

[tako-sphynx]

No news on this?

[jsd219]

Same issue

[aberfeldy]

Got a similar problem. the function will be called once when the site loads and after that never again, also the classes are not updated after scrolling the elements into the viewport.

<template>
  <vs-row ref="row" v-view="handler" vs-justify="center">
    <vs-col type="flex" vs-w="12">
      <vs-card class="card">
        <div slot="header">
[...]
<script>
  handler(e) {
    console.log(e)
  } 

Update: just found it it works on a normal page, but if I wrap my list into a div with a css (see below) to get a scrollable div instead of a long page it won't update anything.

.scroller {
  height: 80vh;
  overflow: auto;
}

[ansibleguy76]

In my case, i wanted to detect if a bulma-dropdown was out of sight and needed to decide whether to use a dropup instead. So basically I use this little piece of code during the dropdown toggle

          var ref=this
          this.$nextTick(()=>{
            // calculate if we need to do a dropup
            var dim = ref.$refs["dd"].getBoundingClientRect() // where dd is a reference to the dropdown content
            var wh = window.innerHeight
            // if dropdown is out out of view AND there is space for dropup, do dropup
            if((dim.bottom>wh) && (dim.top>dim.height)){
              ref.doDropUp=true
            }
          })