javascript - JS matchMedia if 语句

Question

我正在尝试针对 >=768px 的视口(viewport)触发我的 fancybox，并针对 <768px 的视口(viewport)触发我的 swipebox。不幸的是现在都没有打开......我错过了什么？感谢您的帮助!我有大量的 CSS，因此我只是添加 JS(我很确定这是一个语法错误......)。

// JavaScript Document

$(document).ready(function() {
if (window.matchMedia("(min-width: 768px)").matches) {
  
	$(".fancybox").fancybox({
		//width: '70%',
		//height: '70%',
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
		
	});
	
});
var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }
} else {
  ;( function( $ ) {

	$( '.swipebox' ).swipebox();

} )( jQuery );
}

Answer 1

试试这个。我也会更新 fiddle 。

Fiddle here .

$(document).ready(function() {
if (window.matchMedia("(min-width: 768px)").matches) {

  $(".fancybox").fancybox({
    //width: '70%',
    //height: '70%',
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }

  });


var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }
} else {
  ( function( $ ) {

    $( '.swipebox' ).swipebox();

  } )( jQuery );
}
});