如何使文档侧脚本有条件

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. 使上述文档侧代码以视口大小为条件的一种方法。

预先感谢。我知道它不是最整洁的

预先感谢。

Answer 1

这是一种仅在body大于480px宽的方法的方法：

：

        $("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();
            }
        });

这是媒体查询，如果视口小于480px，则将#wrapper显示为块：

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

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