alexandrebonaventure / vue-scrollmonitor Goto Github PK
View Code? Open in Web Editor NEWWrapper to use the awesome scrollMonitor with [email protected]
Wrapper to use the awesome scrollMonitor with [email protected]
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
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!!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.