DOM Load Events

[joshwaaaah]

Hey, great library by the way.

I have a question I was hoping you may be able to help with. We are using the smooth scroll functionality on one of our sites, however we are disabling it on mobile. To do this we are calling the destroy() method, which works well, except for one thing: we have some custom <iframe> elements on our site and we run certain code on its load event, trouble is, because the library replaces the HTML on destroy() it forces the <iframe> load event, which isn't what we want.

Can you think of a way around this? Any help would be much appreciated!

[davideperozzi]

Hi @jnhartshorne1994

Thanks!

If you do not want the dom to be changed, you could create the container and the wrapper element yourself and mention them like this during initialization:

smoothScroll({
  element: {
    wrapper: docuemnt.querySelector('.your-wrapper'),
    container: docuemnt.querySelector('.your-container')
  }
});

This prevents dynamic initialization of these elements, but you must style them yourself. This is because the scroller will no longer perform dome manipulations, as you can see here.

---

Btw. there's a behavior you can use to turn off the scroller on mobile automatically, if you want to use it, here's how:

import { behaviors, smoothScroll } from '@smoovy/scroller';
import { Browser } from '@smoovy/utils';

smoothScroll({
  behaviors: {
    bypassNative: behaviors.bypassNative({
      condition: () => window.innerWidth < 768 || Browser.mobile
    })
  }
});

In this way you will continue to receive onScroll events on mobile. If you have visibility checks that depend on the scrolling events, this might be useful. Otherwise, it is also okay to destroy the scroller completely.

---

I hope this was helpful to you. Let me know if something's not working properly :)

[joshwaaaah]

Hi @davideperozzi,

When you say I'll have to style them myself, what exactly do you mean by that sorry?

Also, turning it off in the second method, does that still re-inject the DOM and things like that? As it's the re-injecting of the DOM that's causing us issues specifically.

Finally, and I probably should have made this clear before, we are importing it currently like the below... Would the behaviours still work in the same fashion?

import { behaviors, nativeSmoothScroll } from '@smoovy/scroller';

Note the nativeSmoothScroll...

Really appreciate your help, so thank you.

[davideperozzi]

The custom styling only applies to the smoothScroll. If you're using nativeSmoothScroll it's already built-in. So you can just create the container and wrapper like this:

<div class="scroller-container">
  <div class="scroller-wrapper">
    <!-- Content & iframe  -->
  </div>
</div>

And use these elements for the scroller:

nativeSmoothScroll({
  element: {
    wrapper: document.querySelector('.scroller-wrapper'),
    container: document.querySelector('.scroller-container')
  }
});

Since you have created these elements yourself, the scroller will not dare to touch them :D This prevents the children from beeing re-injected.

---

The nativeSmoothScroll also has the native fallback built-in. You can configure it like this:

nativeSmoothScroll({
  native: {
    condition: () => window.innerWidth < 768 || Browser.mobile
  }
});

Default is { condition: () => Browser.mobile }

[joshwaaaah]

Hi @davideperozzi

That's brilliant. I implemented your suggestions and they appear to work a treat, so thank you very much for the advice!

Have a great weekend and thanks again, not only for the help but also for creating what is the best smooth-scrolling library we've come across!

[davideperozzi]

@jnhartshorne1994 No problem, I'm glad it works now! Thanks and have a great sunday :)