08Oct

Disable skrollr on mobile, the good way

Skrollr is a JavaScript library doing a Scroll-jacking basically means we replace native scrolling to link actions to the scroll. Here is the good way to disable skrollr on mobile.

Someone asked me to help to fix a small bug on a portfolio he was doing using a paid WordPress theme (Notio theme). The issue was on mobile only. While scrolling the website the user experienced a jump to the top of the page. After looking in the js libraries used in the theme I found out the issue.
Do not use skrollr.init().destroy();

Here was the bit of faulty code:

// disable skrollr if the window is resized below 640px wide
if ($(window).width() <= 640) {
  skrollr.init().destroy();
}

The good way is to do a check and then destroy the skrollr instance if wished

I replaced the lines above by those:

var _skrollr = skrollr.get(); // get() returns the skrollr instance or undefined
var windowWidth = $(window).width();

if ( windowWidth <= 640 && _skrollr !== undefined ) {
  _skrollr.destroy();
}

 

It’s not the first time I have trouble with this JavaScript library, so I thought I would post about it and hopefully save a headache to some people.

Source

Subscribe
Notify of

2 Comments
Oldest
Newest
Inline Feedbacks
View all comments
6 years ago

PLS where can i put this lines?