根据浏览器窗口大小

时间:2015-06-27 06:07:47

标签: javascript jquery html css

当我打开我的网站时,y滚动条被打开,我希望它关闭但是我希望它在窗口重新调整大小时打开它会变得有用。有关如何这样做的任何想法吗?

我已经放入了身体CSS:

body{
overflow-y:hidden;
}

然而,它会在完整尺寸和重新尺寸上隐藏。

1 个答案:

答案 0 :(得分:1)

可以做你所描述的,但我无法想象你为什么要这样做。

您可以让body最初拥有一个包含您引用的规则的类,然后在调整大小时删除它:

CSS:

body.no-vscroll {
    overflow-y:hidden;
}

HTML:

<body class="no-vscroll">

JavaScript(位于文档末尾的script标记中):

$(window).one("resize", function() {
    $("body").removeClass("no-vscroll");
});

请注意使用one(而不是on),因为我们只需要删除第一个调整大小的类。 one将在第一次事件发生时自动删除处理程序。

重新评论:

  

它没有用..现在全尺寸和重新尺寸都没有滚动条

Works for me。我怀疑你没有正确地将上述内容应用到你的页面上。

另外,我确实想到了一个可能的问题:您可能希望在处理load之前等待resize,因为load等待加载所有图像等等和加载图像可能导致调整大小:

$(window).on("load", function() {
    $(window).one("resize", function() {
        $("body").removeClass("no-vscroll");
    });
});

Live Copy

但这并不能说明你所描述的内容。 (不等待load会出现相反的症状:首次加载页面时会出现滚动条,尽管您试图禁止它。)