El evento de @scroll="onScroll" en div no funciona. Necesito detectar cuándo el desplazamiento está en la parte inferior de div.
<template> <div> <button @click="showCountries = !showCountries">Show countries</button> <div v-bind:class="countriesContainerClass" v-if="showCountries" @scroll="onScroll" > <ul> <li v-for="country in createChunk(countries, 20)" v-bind:key="country.iso2" v-bind:class="countryItemClass" > <div v-bind:class="countryFlagClass"> <img class="product_image" :src="country.flag" /> </div> <div v-bind:class="countryNameClass">{{ country.name }}</div> </li> </ul> </div> </div> </template>Este es mi método onScroll.
onScroll({ target: { scrollTop, clientHeight, scrollHeight } }) { console.log("scroll"); // I don't get "scroll" in console. if (scrollTop + clientHeight >= scrollHeight) { console.log("bottom"); } },Primero, debe verificar si está escuchando el evento de scroll en el elemento adecuado. Un elemento activa este evento cuando el propio elemento tiene desplazamiento, no su padre o hijos.
En otras palabras: un elemento que tiene una altura fija (ejemplo: height: 100px o max-height ) y un overflow-y: auto || scroll , activará el evento de scroll cuando el usuario se desplace en ese elemento en particular.
Ahora, en su caso, el elemento div no es el que genera la barra de desplazamiento, por lo que no activará el evento de desplazamiento. Identifique correctamente qué elemento pinta la barra de desplazamiento y luego adjunte el evento de desplazamiento.
Luego, para detectar si un pergamino ha llegado al final (está en la parte inferior), podría intentar:
onScroll(e) { const { scrollTop, offsetHeight, scrollHeight } = e.target if ((scrollTop + offsetHeight) >= scrollHeight) { console.log('bottom!') } }Tengo un ejemplo de trabajo en codepen para que lo compruebes. Debe abrir la consola Codepen en la parte inferior izquierda para ver los registros. https://codepen.io/LucasFer/pen/MWOQMLX