I'm using skrollr.js to animate a few things on a page. I'd like to only initialize skrollr when the window viewport width is larger than a particular size, and pletely remove it or destroy it when I'm below that viewport width.

For instance, when the browser window width is greater than 600px, I want skrollr to be initialized, but when the browser's window width is less than 600px, I want to turn off or destroy skrollr.

I'm using skrollr.js to animate a few things on a page. I'd like to only initialize skrollr when the window viewport width is larger than a particular size, and pletely remove it or destroy it when I'm below that viewport width.

For instance, when the browser window width is greater than 600px, I want skrollr to be initialized, but when the browser's window width is less than 600px, I want to turn off or destroy skrollr.

• javascript
• scroll
• responsive-design
• parallax

• Is it OK to have this check at page load or does it need to react to window resize? – Prinzhorn Commented Jul 17, 2013 at 21:11
• It will need to react to window resize. I'm already using jRespond elsewhere on the site, so if it helps, I can listen for specific mediaquery "breakpoints". – ctrlaltdel Commented Jul 18, 2013 at 14:58
• 2 If you want it dynamic, you're out of luck. github./Prinzhorn/skrollr/issues/202 github./Prinzhorn/skrollr/issues/109 – Prinzhorn Commented Jul 18, 2013 at 16:46
• Thank you for posting those links. – ctrlaltdel Commented Jul 18, 2013 at 20:29
• 1 #109 is fixed. There's now a destroy method. – Prinzhorn Commented Sep 19, 2013 at 6:24

3 Answers 3

The destroy instance method is what you are looking for. I've been working on it on last weeks and now it looks like Prinzhorn already merged my changes on the master branch.

Hope to be helpful, cheers!

You can use Modernizr (and Yepnope.js) to test a given media query, then, if it returns true, import the script. This is documented here.

So, for instance:

Modernizr.load([
  {
    test: Modernizr.mq('only all and (min-width: 600px)'),
    yep: '/js/skrollr.js',
  }
]);

Use the skrollr.destroy() function in bination with enquire.js (mediaqueries for js).

enquire.register("screen and (min-width: 960px)", {

    match : function() {
        var s = skrollr.init();
    },      

    unmatch : function() {
        var s = skrollr.destroy();
    },    

    deferSetup : true,

});