wrapper problem

[junhee0122]

First of all, thank you for publishing this wonderful plugin.
I am looking for ways to parallax within a certain section.
I read the document and wrote it as it was written, but it does not move.
I want to move only div in body, but what should I do?

<script> var rellax = new Rellax('.rellax', { wrapper: document.querySelector('#section4') // DOMElement }); </script> <script> var rellax = new Rellax('.rellax', { wrapper: '#section4' }); </script>

It doesn't work...

[nathobson]

I'm also having difficulties with the wrapper option. All fine and working without but as soon as I add a wrapper elm, Rellax stops doing it's thing (well, it seems to get stuck)

For reference:

Codepen without a wrapper
And a fork of the above with a wrapper

[metacurb]

@nathobson as far as I can tell, the custom wrapper is working as intended. In your Codepen example with wrapper: '.cards', you are expecting the .card elements to move as you scroll. However, you are still scrolling the body, and not .cards itself. The idea is that as you scroll within the wrapper element that you choose, your content will move.

I've butchered your pen a little to make it work. You need to introduce a scroll on your .cards, otherwise there will be no way for it to monitor the scroll position. If you scroll within the .cards element, your .cards will now move as expected. link here.

@junhee0122 it's possible that you are also having this same issue.

[nathobson]

Thanks for the reply @BeauAgst and appreciate you taking a look.

I think perhaps I misunderstood what the wrapper option was intended for. When I have a moment, I'll have a play report back. My understanding was that if you passed a wrapper elm, the parallax offset would be relative to the wrapper and not the document. The use case is that if you have an element further down the page and the offset is calculated relative to the document, the offsets are going to be more exaggerated than those where an element is near the top of the page. Does that make sense?

[metacurb]

Hey @nathobson,

I didn't write the library, but taking a quick look at the code here, it grabs the wrapper's scrollTop value. Without a scrollbar, it will always be 0.

I get what you're going for, but you may have to modify the library to make it work as you'd wish.

[nathobson]

Got it, thanks. I'll have a dig through 👍

[MadsMadsDk]

I ran into this problem as well. The problem is, that the wrapper element per default expects the wrapper to be scrollable (listens for wrapper.scrollTop). This is probably rarely the use case though.

I've made a PR with a new option: relativeToWrapper, which you can set to true.
It takes the scrollposition of the document, and subtracts the vertical offset of the wrapper element, to calculate the new position.

It's right here: #125

[moeamaya]

Thanks for your work @MadsMadsDk. Merged your code into 1.7!

[koertho]

@moeamaya Would be great to have this (relativeToWrapper option) added to the documentation. Just searched and tried very long until I found this issue with the solution.

[jaydickinson]

@nathobson did you ever sort out your problem I have the same issue which would be nice if I could get rellax to do that.

[teddybradford]

This should definitely be added to the docs! :)

[connorhvnsen]

I ran into this problem as well. The problem is, that the wrapper element per default expects the wrapper to be scrollable (listens for wrapper.scrollTop). This is probably rarely the use case though.

I've made a PR with a new option: relativeToWrapper, which you can set to true.
It takes the scrollposition of the document, and subtracts the vertical offset of the wrapper element, to calculate the new position.

It's right here: #125

You are a hero!!! Can this please be added to the docs? I can't be the only one who misunderstood the wrapper prop...