Question

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

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

当我删除表格包装功能时，滚动会中断。相反，我希望这两个可能的解决方案之一：

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

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

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

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

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

如何使文档边脚本有条件？

1 个答案: