如何在移动设备上禁用滚动以使此脚本$ align？

Question

I don't understand jQuery enough to either search for the solution, or try to implement one on my own. On desktop, I use a slideToggle to show/hide content based on which button is clicked. If the content window is 'shown' I scroll the screen to the top of the '#section' holding the content. I want to disable this on Mobile, becasue the content stacks into a single column on mobile and if the user clicks on the bottom of the stack, it scrolls him back to the top of the section.

This is the script:

var $align = $("#features");
function slideonlyone(thechosenone) {
    $('.feature-box').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).slideToggle(400);

            $("body").animate({
                scrollTop: $align.offset().top
            },{
                duration: 1200,
                queue: false
            })
        }
        else {
            $(this).slideUp(400);
        }
    });
}

The site can be viewed here:

www.newmarketsolar.ca

If you enable the inspector and turn on mobile emulation you can see what I mean by clicking on 'learn more' button on the last icon 'interactive' - it will scroll you up - I need to turn this off for devices only up to 768px.

Any help would be marvelous.

Answer 1

So what you want to do is check if the screen width is smaller than 768px first, you can do this with:

slideonlyone(thechosenone){
    if($( window ).width() > 767){
       // your function body
    }
}

This checks if your window is bigger than 767px and otherwise doesn't execute.

edit: I didn't look at the site provided, but essentially this is what you need and can place as a condition around anything that should only happen on screens bigger than 767px

Answer 2

The below page has excellent article on Media query listeners in javascript, http://www.javascriptkit.com/dhtmltutors/cssmediaqueries4.shtml

The below code should take care of your requirement,

var mql = window.matchMedia("screen and (min-width: 768px)");

if (mql.matches){ // if media query matches

var $align = $("#features");
function slideonlyone(thechosenone) {
    $('.feature-box').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).slideToggle(400);

            $("body").animate({
                scrollTop: $align.offset().top
            },{
                duration: 1200,
                queue: false
            })
        }
        else {
            $(this).slideUp(400);
        }
    });
}

}

The above code runs only once and should work fine on devices or when the page is loaded keeping the browser width less than 768px.