Set wrapper to parent element

[pestbarn]

Would it be possible to add an option to set the wrapper to be the immediate parent? I'm working with a lot of generated content, where I don't have the possibility to specify the wrapper based on a class or id selector.

new Rellax('.rellax', { wrapper: this.parentElement })

// or on the element itself:
// data-parent-wrapper="true"

The above doesn't break anything, but obviously doesn't have any effect either. Could be a great addition 😃

[cheestudio]

I second this.

[dannyuk1982]

+1, if you have multiple background images, past the top one it's pretty tricky to use Rellax

[dannyuk1982]

Actually I've managed to get this to work

const rellaxin = document.querySelectorAll(".rellax");

rellaxin.forEach(el => {

  const rellax = new Rellax(el, {
    relativeToWrapper: true,
    wrapper: el.parentElement
  });

  window.addEventListener("scroll", () => { // fix to init
    rellax.refresh();
  });

});

[cheestudio]

That's gloriously simple and straightforward. I can't believe I've overlooked the relativeToWrapper option all this time!

[dannyuk1982]

Well I only just discovered this library 30 mins ago so benefit of fresh eyes, I was poking around the other issues and someone had done a PR with it, and seems to work! I'm not sure that relativeToWrapper even existed when this issue was created!

[cheestudio]

Hm, it seems to have existed up to a few months prior to this issue being created:

#125

[dannyuk1982]

I got lucky then :) Hope it works for you too, I guess with a reference to the element you could always make a data-rellax-parent attribute to point to another class or id etc. if it's more complex than just referencing the immediate parent

[brandlewco]

Been having a similar issue but am worried about the evenr being triggered on scroll. is this how it runs traditionally, firing off a redraw for every pixel of scroll? seems like a lot more work.

[zangab]

sorry, but this is just bad practice / performance:

window.addEventListener("scroll", () => { // fix to init
  rellax.refresh();
});

[dannyuk1982]

Agreed! It's far from ideal.

[pestbarn]

sorry, but this is just bad practice / performance:

window.addEventListener("scroll", () => { // fix to init
  rellax.refresh();
});

If you do this, you should definitely set up a debouncer.