javascript - 如何使文档端脚本有条件？

Question

因此，当视口(viewport)为 480 像素或以下时，我无法中断水平滚动。我的卷轴有这个文档端脚本:

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

当我删除表格环绕功能时，滚动中断。相反，我希望得到这两种可能的修复方法之一:

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

提前致谢。我知道它不是最简洁的，但它是我能够让滚动条工作的唯一方法(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();
            }
        });

如果视口(viewport)小于 480 像素，下面是将 #wrapper 显示为 block 的媒体查询:

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

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