DominikSerafin/vuebar

Seems to disable window.scroll?

Closed this issue · 4 comments

nickycdk commented

Im trying to use this with this: https://github.com/BKWLD/vue-in-viewport-mixin - which listens for the window.scroll event - But seems like Vuebar is removing this, which means I cant detect when a user has scrolled to an element?

You can with ease test this by trying:
window.onscroll = function (e) {
console.log("Scrolling");
}

and you will see when using vuebar, this doesnt get fired?

Any workarounds?

DominikSerafin commented

Hi @nickycdk , could you provide minimal reproduction of this issue?

Good starting points:
http://jsfiddle.net/u94ns8jc/1/
https://www.webpackbin.com/bins/-Kyoqtm8CbjpkYegi7mF

nickycdk commented

Hi @DominikSerafin - Sure, you can see a fiddle here.. (http://jsfiddle.net/u94ns8jc/75/). As you can see im attaching a window.onscroll method, this however doesnt get fired even when im scrolling... Im guessing its because we are scrolling inside a div element, and not body, html, however, this makes it somewhat impossible to detect how far a user has scrolled down a page, or if an element is in view, as we are listening for the native scroll event in these scenarios...

DominikSerafin commented

@nickycdk in your example, you are attaching scroll even listener to window while the Vuebar scrollable element is entirely different element from window.

See updated working jsfiddle: http://jsfiddle.net/u94ns8jc/80/

And yeah, current Vuebar version can't be used to change the "main" body scrollbars if you're looking for this functionality. You can however wrap your entire site in wrapper element (with 100% height and width) and apply Vuebar to it. Similar to how it's done one the Vuebar website https://github.serafin.io/vuebar/.