Vue Bootstrape - How to detect bottom of the div when scroll

I am using Vue Bootstrap table to show the data. Here is my code:

<b-overlay :show="loadMore" rounded="sm">
    <b-table ref="table" striped hover refs="all_products" :items="items" :fields="fields" responsive @sort-changed="onSortChange" show-empty sort-direction="asc" :sort-desc.sync="sortDesc" @row-clicked="onRowClick" bordered>
        <template #cell(image_link)="row">
            <span v-if="row.item.image_link.constructor === Array">
                <b-img-lazy
                    v-bind="mainProps"
                    :src="row.item.image_link[0]"
                ></b-img-lazy>
            </span>
            <span v-else>
                <b-img-lazy
                    v-bind="mainProps"
                    :src="row.item.image_link"
                ></b-img-lazy>
            </span>
        </template>
    </b-table>   
</b-overlay>

The output is something like this:

On the right side you can see the vertical scroll bar. Now, I want log something on the console when scroll to bottom.

I have no idea how can I do this :(