alexandrebonaventure / vue-scrollmonitor Goto Github PK

With markup like this:

<scroll-item id="section-8" @change="itemScrolled">
    <p id="section-8" class="content-item">Deserunt architecto modi possimus ...</p>
</scroll-item>

<scroll-item id="section-9" @change="itemScrolled">
    <p id="section-9" class="content-item">Facilis culpa possimus natus eveniet,... </p>
</scroll-item>

The actual DOM of the app just has the p elements, and I expect their classes to change depending on the scroll position/state, but the classes never seen to change. I'm using Vue 2.6.6 with a custom scroll container.

@change="onUpdate"
Is not called on the scroll-item, only on the container.
I ended up not using this feature.

The docs say that the container prop is a DOM element, and that the ScrollContainer will use that element to watch for scrolling. In the actual code, it appears that the container prop is actually a boolean. Default is false and it listens for scrolls on the document body. If container is true, it just uses the ScollContainer component itself, which is a div (this.$el).

Looks like there's also an open PR related to this

So, instead of

<div class="my-container>
  <scroll-container :container="MyContainerDivDomElement">
    // ... items ...
  </scroll-container>
</div>

The correct way to use a custom container with the current version of this package is:

<scroll-container class="my-container" :container="true">
  // ... items ...
</scroll-container>

I prefer it this way, but the API docs are misleading right now.

As soon as I include import VueScrollMonitor from 'vue-scrollmonitor' in my code I get the following error in the console:

Uncaught TypeError: document.body is null
    f vue-scroll-monitor.esm.js:60
    a vue-scroll-monitor.esm.js:96
    scrollMonitor vue-scroll-monitor.esm.js:37
    b vue-scroll-monitor.esm.js:26
    scrollMonitor vue-scroll-monitor.esm.js:30
    scrollMonitor vue-scroll-monitor.esm.js:31
    scrollMonitor vue-scroll-monitor.esm.js:13
    scrollMonitor vue-scroll-monitor.esm.js:14
    createCommonjsModule vue-scroll-monitor.esm.js:8
    js vue-scroll-monitor.esm.js:11
    js log_viewer-3963e0410cafaad96e3a.js:13426
    Webpack 7

yarn.log
Gemfile.log

Hey there,

I've installed this as a plugin in Nuxtjs and although it seems to work in the browser I get this error in the server:

Any idea how to solve this?

Thanks in advance

The API docs say that the ScrollItem component emits a change event, but I don't see anything in the code that emits this event.

With this markup:

<scroll-item id="section-8" @change="itemScrolled">
    <p id="section-8" class="content-item">Deserunt architecto modi possimus ...</p>
</scroll-item>

<scroll-item id="section-9" @change="itemScrolled">
    <p id="section-9" class="content-item">Facilis culpa possimus natus eveniet,... </p>
</scroll-item>

The itemScrolled method is never called. I'm using Vue 2.6.6

Hello!

I've been trying to pass a different container to the scroll-container with no luck. Looking at the code, it seems that the container (dom element) needs to be when creating the scroll-container.

My scroll-container is inside of a component, and the container I want to pass as props is the $el of that component itself.

Is it possible to pass a new container once the scroll-container is created? Or halt the creation untill the new container is accessible?

Thanks for the work!!