scroll-listener on target div instead of page

[StefKors]

Is it possible to set the scroll event on an overflowing div instead of the page/document?

[vtimofeev]

Hello. It's not supported now;
It can be implemented in future versions;

[vin-ni]

+1

[noschang]

I have the same problem. It seems that when you mess around with CSS "overflow" and "height: 100%" properties the events stop being fired by the "window" object. The plugin uses this object to watch the events:

vue-check-view/index.js

Lines 50 to 51 in cd64a23

	window.addEventListener('scroll', scrollThrottledHandler)
	window.addEventListener('resize', scrollThrottledHandler)

However, the events are still fired by the "body" element. The solution seems to be replacing these lines by:

    // Listent to body element
    window.document.body.addEventListener('scroll', scrollThrottledHandler)

    // This already works, no need to change
    window..addEventListener('resize', scrollThrottledHandler)

It is advisable, however, to make some tests to check if it will work on all scenarios.
While a patch fixing this isn't released I've managed to make it work using a small hack in nuxt:

// File: ~/plugins/VueCheckView.js

import Vue from 'vue'
import checkView from 'vue-check-view'

Vue.use(checkView)

// Hack to make it work even with overflow and height 100%

window.document.body.addEventListener('scroll', function (event) {
  window.dispatchEvent(new event.constructor(event.type, event))
  event.preventDefault()
  event.stopPropagation()
})

Then in nuxt.config.js:

export default {
  plugins: [
    '~/plugins/VueCheckView.js',
  ],
}