jquery - 无法检查 Vue 选项卡项中的滚动

Question

我正在尝试检查用户是否已滚动到页面底部。

这是我到目前为止尝试过的代码：

<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>

这是检查项目是否在创建的钩子中滚动的代码：

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

Answer 1

看来您正在使用 vuetify。你知道他们有一个内置的滚动指令吗？所以你最终可以做这样的事情

<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>

快乐编码！