search

dirkgroenen / viewport-checker

Little utility to detect if elements are currently within the viewport :wrench:
https://dirkgroenen.nl/viewport-checker/
606 stars 300 forks source link

Using viewport-checker and fullpage.js #36

Closed dsiglin closed 8 years ago

dsiglin commented 8 years ago

Thanks for making this. It makes it a lot easier for me to fire off CSS animations.

I'm working on my personal photography website and have been using fullpage.js. One of the options for fullpage.js is "autoscroll: true" which changes the scrolling of a site so each scroll action moves up or down a section. You can see it in action on my site (davidsiglinphotography.com). So here's my question - I just noticed that when I have "autoscroll: true", viewport-checker doesn't fire off when the div class it is watching for comes into the viewport. When I set "autoscroll: false" viewport-checker fires off just fine. I was curious if you knew why. Thanks.

dirkgroenen commented 8 years ago

You're welcome.

The problem you're experiencing is duo fullpage.js' scroll behavior. When you enable autoscroll: true it doesn't actually scrolls, but wraps the entire site in a div which is moved around (check your element inspector and you'll notice a translate3D at the top.

So what you have to do is either disable the autoscroll functionality, build one of your own which uses scroll or manually fire the viewport-checker update function (this.checkElements). Although I dont think the last one is going to work, since there is no scrollTop set when not using the browser's scroll.

dsiglin commented 8 years ago

Ok thanks for explaining it. At this point I'm still learning CSS/HTML so javascript is still beyond me. Do happen to know of another jquery plugin that would work? Thanks again.

dsiglin commented 8 years ago

Actually, I found this which I think will work: https://css-tricks.com/slide-in-as-you-scroll-down-boxes/

dirkgroenen commented 8 years ago

Nope that won't work either, cause it's binding the the window scroll event which in your case isn't fired. ;)

dsiglin commented 8 years ago

sigh hmmm well dagnabbit guess I'm out of luck.

dirkgroenen commented 8 years ago

I'm afraid so, though 'automated' scrolling isn't that hard to create yourself. Try searching on Google with therms like scroll to div jquery. This website is using it for example: http://www.gallowaystudio.nl/

dsiglin commented 8 years ago

ok thanks.