Question

Javascript/Jquery 当窗口缩小到1000px时,锁定窗口大小

我现在已经开发好了缩小时的元素的缩放和移动的效果,现在遇到一个问题,当窗口缩小到1000px的时候,我需要让他锁定窗口的宽度为1000px,比1000小的时候,出现横向的滚动条,拉动这个滚动条,左右的最大的宽度为1000px,也就是说,整个网站左右拉动,最多只能显示1000px的内容.
我现在功能是:导航栏一直置顶100%的宽度,当我不停缩小的时候,里面的内容会随着宽度缩小而变化,当我缩小到1000px的时候锁定网页宽度为1000px;

目前代码如下:
$(window).resize(function()
{
width = getWindowWidth(); //用来获取浏览器的宽度,缩小窗口时,这个值也不停缩小
adjustTopBarShowArea(width);
}
function adjustTopBarShowArea(width)
{
if(width >= 1000) { $("#topbar").css("min-width",width); } else { $("#topbar").css("min-width",1000); }
}

这样做,会出现BUG.当我快速缩小窗口时,小于1000px的时候,横向滚动条出现,但是拉倒最右边,会出现空白.如下图:

在adjustTopBarShowArea函数的else中,去添加scrollWidth的话,显示的值是大于1000px的值.所以求解,如何去锁定scrollWidth的值为1000px,没有财富值,请见谅.

Answer 1

直接给body定个最小宽度的样式就行了。

body {
min-width: 1000px;

}