CODEWITHSUNDEEP
jqueryvue.jsvuejs2vuetify.jsvuetify-tabs
Naveed Zahoor
Naveed Zahoor

Reputation: 51

Unable to check for scroll in Vue Tab Items

I am trying to check if a user has scrolled to bottom of the page.

Here is code I have tried so far:

<v-tabs-items id="content_scroll" v-model="active_tab"  class="full_size_div overflow-auto">
    <v-tab-item key="0">
      <div  v-if="activities && activities.length > 0"  id="content_home" class="thing-common-class overflow-auto full_size_div d-block">
        <div v-for="(activity, index) in activities"  :key="index">
          <v-lazy v-model="activities" :options="{
                        threshold: .5
                    }">
           <CutomComponent></CustomComponent>
          </v-lazy>
        </div>
      </div>
  
    </v-tab-item>
    <v-tab-item  key="1">
      // Second Tab Item
    </v-tab-item>
  </v-tabs-items>

Here is code to check if items are scrolling in created hook:

 $('#content_home').scroll(() => {
        console.log('content is scrolling')
 });

Upvotes: 1

Views: 1290

Answers (1)

mechanicalsheep
mechanicalsheep

Reputation: 252

It seems that you are using vuetify. Did you know that they have a built in scroll directive? so you can end up doing something like this

<script>
export default{

data(){
return{
.....
}
},
methods:{

  onScroll(){
  console.log("scrolling!")
  }
}
<v-tabs-items v-scroll.self="onScroll" id="content_scroll" v-model="active_tab"  class="full_size_div overflow-auto">
    <v-tab-item key="0">
      <div  v-if="activities && activities.length > 0"  id="content_home" class="thing-common-class overflow-auto full_size_div d-block">
        <div v-for="(activity, index) in activities"  :key="index">
          <v-lazy v-model="activities" :options="{
                        threshold: .5
                    }">
           <CutomComponent></CustomComponent>
          </v-lazy>
        </div>
      </div>
  
    </v-tab-item>
    <v-tab-item  key="1">
      // Second Tab Item
    </v-tab-item>
  </v-tabs-items>

Happy Coding!

Upvotes: 1

Related Questions