如何使文档脚本有条件？

Question

因此，当视口为480px或更低时，我无法打破水平滚动。我的卷轴有这个文档端脚本：

<script> 
     $(function() { 
      $("#wrapper").wrapInner("<table><tr>"); 
      $(".post").wrap("<td>"); 
     }); 
     $(function() { 
      $("body").mousewheel(function (event, delta) { 
       this.scrollLeft -= (delta * 50); 
       event.preventDefault(); 
      }); 
     }); 
    </script> 

当我删除表格环绕功能，然后滚动中断。相反，我希望这两种可能的修复之一：

1. 一个媒体查询命令，强制删除一个类，以便我可以显示为一个块。
2. 一种使上述文档端代码有条件的视口大小的方法。

在此先感谢。我知道它不是最好的，但它是我能够使滚动工作的唯一方式（IE除外）

在此先感谢。

Answer 1

下面是一个方法仅水平滚动如果body超过480像素宽：

 $("body").mousewheel(function (event, delta) { 
      var $this = $(this); // 'body' in this case 
      var widthLimit = 480; 
      if ($this.width() > widthLimit) { 
       // horizontal scroll 
       this.scrollLeft -= (delta * 50); 
       event.preventDefault(); 
      } 
     }); 

这里是媒体查询，将显示#wrapper作为一个块，如果视口小于480像素：

@media only screen and (max-width: 480px) { 
    #wrapper { 
     display: block; 
    } 
} 

请注意，媒体查询通常只能更改样式，不能添加或删除classes或id s。