how to disable javascript for mobile devices

Question

Hi so this is the page I will be talking about: https://wordpress-776730-2792401.cloudwaysapps.com/demo-horizontal-scrol/

I have a horizontal scroll on it which I want to disable for mobile devices (tablet and phone). This is the code i for the horizontal scroll:

<script type="text/javascript">
    if (window.innerWidth > 1025) {
       const scrollContainer = document.querySelector("main");

        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault();
            scrollContainer.scrollLeft += evt.deltaY;
        });
    } else {

}
</script>

This is the code i used to disable it but it also disables desktop horizontal scroll:

<script type="text/javascript">     function isMobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); }  if (!isMobile()) { <script type="text/javascript">
    if (window.innerWidth > 1025) {
       const scrollContainer = document.querySelector("main");

        scrollContainer.addEventListener("wheel", (evt) => {
            evt.preventDefault();
            scrollContainer.scrollLeft += evt.deltaY;
        });
    } else {

}
</script>

PLEASE HELP :)

"mobile devices" isn't a useful way to class devices. It is *usually* used to mean "devices with a small screen", but it sounds like you are looking for "devices with a touch screen" (or rather "devices without a pointing device"), and it could mean "devices with a slow Internet connection" or "devices with a metered Internet connection". What factors do you actually care about. — Quentin, Aug 02 '22 at 09:24

score 0 · Answer 1 · answered Aug 02 '22 at 09:36

You can try this, if you want to disable your custom js:

function custom_load_scripts() {
    // Load if not mobile 
    if ( ! wp_is_mobile() ) {
        wp_enqueue_script( 'script-handle', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );

Or you can use wp_print_scripts action to disable any scripts:

add_action( 'wp_print_scripts', 'dequeue_unnecessary_scripts' );
function dequeue_unnecessary_scripts() {
    // Deregister if mobile
    if ( wp_is_mobile() ) {
        wp_dequeue_script( 'js-handle' );
        wp_deregister_script( 'js-handle' );
    }
}

Or you can check this post.

how to disable javascript for mobile devices

1 Answers1