Luxy.js - How do I disable smooth scroll on handhelds?

Design help Custom code
1

Hey guys,

I need your help with some custom code. I am using CJ Hersh’s webflow clone of the ‘Luxy.js’ smooth scrolling project. It’s working great but one thing that I’m having an issue with is trying to find a javascript snippet that makes it so it doesn’t run Luxy.js on hand held devices.

I have found a few clues over at stackoverflow with these snippets, but alas no luck with disabling the scrolling effect on hand held devices.

Any help is greatly appreciated! Please find below the read-only for the webflow project, and the published link.

Here is my site Read-Only:
https://preview.webflow.com/preview/luxy-free-mobile?utm_medium=preview_link&utm_source=designer&utm_content=luxy-free-mobile&preview=6a01fa6fcd36205232004d675e3948d9&mode=preview&fbclid=IwAR0OsZW9SwzcZl8RC7ArXHyKeJYfls8eP7ffXVPo1VhZrnNbCCXF2olDfVA

Published:
https://luxy-free-mobile.webflow.io/

1 Like
2

I’m curious about this too, following. Where would you paste the code below into? I’ve treid pasting that into and it doesn’t seem to work on the published site.

Clone the page here: https://webflow.com/website/luxy-free-mobile

if (window.screen.width > 780) {
  document.write( 
    '<script src="https://cjh.sfo2.cdn.digitaloceanspaces.com/Smooth-Scroll/luxy.js"><\/script>'
  )
}
1 Like
3

Hey guys, I found a solution that worked well for me.
Paste in this code inside of the footer code:

    <script>
    var _ua = (function(u){
    	return {
    		Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) 
    		|| u.indexOf("ipad") != -1
    		|| (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
    		|| (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
    		|| u.indexOf("kindle") != -1
    		|| u.indexOf("silk") != -1
    		|| u.indexOf("playbook") != -1,
    		Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
    		|| u.indexOf("iphone") != -1
    		|| u.indexOf("ipod") != -1
    		|| (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
    		|| (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
    		|| u.indexOf("blackberry") != -1
    	}
    })(window.navigator.userAgent.toLowerCase());

    var luxyEl = document.getElementById('luxy');
    if(luxyEl){
    	if(!_ua.Mobile&&!_ua.Tablet){
    		Luxy.init();
    	}
    }
      </script>
4

Hi all

I know, this is an old thread, but I’ve found a better solution which worked for me.

<script src="https://min30327.github.io/luxy.js/dist/js/luxy.js"></script>
<script>
	var Touch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
  if (typeof Touch === 'undefined') {
    // Init Luxy.js
      luxy.init({
        wrapper: '#luxy',
        wrapperSpeed: 0.065,
    });

}
</script>

This script will check, if the device is a touch device.
Hope this helps for you as well and wish you all a nice day!

Christoph

6 Likes
5

Thanks Christoph!

Works perfectly for me :+1:

6

Hey Chris, thank you so much! This works for me!!