[FIXED] how to use scroll event listener in vue nuxt ts for specific div

Issue

I know it is very possible with nuxt js. But how we can do this with nuxt and ugly ts? Convert this code into the terms of script lang ts if anyone will be able to do that. It's impossible as for nuxt there is near to no content on scroll event listening over a specific div attached example https://codepen.io/ash_0001/pen/NWMYaOw

    new Vue({
  el: '#app',
  data: {
    loading: false,
    nextItem: 1,
    items: []
  },
  mounted () {

    
    const listElm = document.querySelector('#infinite-list');
    listElm.addEventListener('scroll', e => {
      if(listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
        this.loadMore();
      }
    });

 
    this.loadMore();

  },
  methods: {
    loadMore () {
      
      
      this.loading = true;
      setTimeout(e => {
        for (var i = 0; i < 20; i++) {
          this.items.push('Item ' + this.nextItem++);
        }
        this.loading = false;
      }, 200);
   
      
    }
  }
});

This is my package.json file

{
  "name": "web_portal",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style"
  },
  "dependencies": {
    "@bachdgvn/vue-otp-input": "^1.0.8",
    "@morioh/v-msg": "^1.0.4",
    "@nuxt/content": "^1.9.0",
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/auth-next": "5.0.0-1608568767.2fe2217",
    "@nuxtjs/axios": "^5.12.4",
    "@nuxtjs/pwa": "^3.0.2",
    "@stripe/stripe-js": "^1.14.0",
    "@vue-stripe/vue-stripe": "^4.1.8",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6",
    "nuxt-property-decorator": "^2.8.8",
    "nuxt-socket-io": "^2.0.3"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-config-typescript": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "babel-eslint": "^10.1.0",
    "cypress": "7.1.0",
    "eslint": "^7.10.0",
    "eslint-config-prettier": "^6.12.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.1.2",
    "stylelint": "^13.7.2",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0",
    "video.js": "^7.11.8"
  }
}

Solution

If you want some easy to use infinite scroll implementation, I recommend giving a try to vue-observe-visibility package.
Otherwise, you can also of course implement it with some vanilla implementation using the Intersection Observer API as showcased here.

The rest of your questions are answered in the comments above.

Answered By - kissu

Answer Checked By - Mary Flores (PHPFixing Volunteer)