Javascript 在浏览器上调整包装器/遮罩的大小调整大小

关于如何在浏览器上重新调整包装器和掩码的大小，有什么想法吗？ 现在它在加载后停止屏蔽，所以基本上当我滚动内容时，它会被切断。 请看一个例子

$(document).ready(function() {

    $('a').click(function () {

        $('a').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr('href'), 800);      

        return false;
    });

    $(window).resize(function () {
        resizePanel();
    });

});

function resizePanel() {

    width = $(window).width();
    height = $(window).height();

    mask_width = width * $('.item').length;

    $('#debug').html(width  + ' ' + height + ' ' + mask_width);

    $('#wrapper, .item').css({width: width, height: height});
    $('#mask').css({width: mask_width, height: height});
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0);

}

---

这实际上并不需要javascript。我会输入一个媒体查询（当您切换到手机样式时），将您的#包装器、#掩码和#项1设置为：

height: auto !important;

---

首先，如果让css将其作为固定对象处理，那么使用掩码将为您节省很多麻烦。如果你这样做，你可以从你的调整大小功能中提取大量的代码，事情就会运行得更快

#mask{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url(semi-transparent.png);
}

包装物品也是如此。只需设置宽度%100，让css完成繁重的工作

.item {
  width:100%;
}

所以现在你的调整大小的功能是下降到

$(window).resize(function () {
  $('#wrapper').css({width: $(window).width(), height: $(window).height()})
    .scrollTo($('a.selected').attr('href'), 0);
});

---

至于包装器本身，我不完全清楚问题出在哪里。如果您可以发布演示或JSFIDLE，我将更新我的答案。

由于某些原因，当页面加载时，我在Firebug中的

id='mask'

上悬停时，看不到任何颜色。加载页面时，只需

id='item1'

即可在Firebug中显示颜色。调整浏览器窗口大小时，遮罩显示颜色，其CSS被划掉。此外，Firebug中还有大量控制台错误。虽然我们愿意提供帮助，但我们不会为您构建整个网站。首先使用Firebug调试您的代码，然后返回给我们。谢谢。

为什么不让元素流定义页面大小，而不是将所有内容都包装在固定高度？当我转到上面列出的链接时，您能确切地告诉我如何重新创建您遇到的问题吗？加载窗口，然后调整浏览器的大小，然后单击另一个链接…例如关于我们。哦。。我现在看到了演示链接。我会尝试将掩码和项目js移动到css，这样可能会使它更快一些。你看到问题了吗？如果加载常规大小的屏幕…然后调整屏幕大小并单击另一个按钮…包装器设置为原始加载，并切断内容。