I'm still newer to integrating Skrollr on Wordpress, and while I liked it at first I'm questioning if it is outdated to use. Regardless, I've looked up several articles on this but so far I've either done them wrong, or they don't work for some reason. I'll describe more below.
First, I use Elementor with a child theme derived from Hello Elementor. I have two sections with simple HTML plugins where I have scrolling panels fly in and out, the two sections I just have flipped panels. It works perfectly up until I try to use anything on a real life phone (as in not just an emulated one which worked fine) or tablet. Obviously since I've never used Skrollr before on a live site, I was not anticipating this type of hangup.
I'm brining in two instances, so for example here is one:
<div class="panels-container-1a">
<div
class="panel1-1a"
data-anchor-target="#panels-section--trigger-1a"
data-center-top="opacity: 0; top: 100%;"
data-400-top="opacity: 1; top[sqrt]: 60%;"
data-center="top: 50%"
data--400-bottom="opacity: 1; top[sqrt]: 40%;"
data-center-bottom="opacity: 0; top: -0%;"
></div>
<div
class="panel2-1a"
data-anchor-target="#panels-section--trigger-1a"
data-center-top="opacity: 0; top: 0%;"
data-400-top="opacity: 1; top[sqrt]: 40%;"
data-center="top: 50%"
data--400-bottom="opacity: 1; top[sqrt]: 60%;"
data-center-bottom="opacity: 0; top: 100%;"
>
<h2>Upcoming Events</h2>
<p>See the latest action, suspense, and champions live!</p>
<a class="button-shine--link2" href="#">
<div class="button-shine--button2">START WATCHING</div>
</a>
</div>
</div>
</section>
<script
type="text/javascript"
src="/wp-content/themes/rmpw/js/skrollr.min.js"
></script>
<script type="text/javascript">
0;
var s = skrollr.init();
</script>
I've tried creating the id="skrollr-body" by both wrapping the HTML above in a body tag, and I've also tried adding it to <body id="skrollr-body" <?php body_class(); ?>> within the header.php of the parent theme to the entire site. Once I do this, it seems to scroll fine on mobile until it reaches the HTML section, then stops. (I should mention though, that I have a sticky header as well so I'm not sure if that was the issue)
I've also tried putting the following code into the actual skrollr.js file at the bottom within the main function to just simply destroy it after it reached a certain width, then minified it after:
var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined
var windowWidth = $(window).width();
if ( windowWidth <= 767 && _skrollr !== undefined ) {
_skrollr.destroy();
}
And still to no avail. So what exactly am I doing wrong here? Any help would be appreciated, as I have two sites that currently use this and it would really suck to try to reinvent the wheel so late into release.
Edit: I've tried updating removing the full body ID and adding the id just to the main section for the homepage, and it still seems to not work.
var x = document.getElementsByClassName('elementor-18')[0];
x.id="skrollr-body"
I just simply stopped it from being called at all in the first place and it seems to do the trick, just use static images in place.