js中resize()方法引起的初始化页面空白边框(其实是空白滚动条)、窗口化浏览器页面空白边框、改变浏览器宽高页面空白边框

写了个页面，为了解决页面适应浏览器大小变化就加了$(window).resize();在里面计算各种元素的宽高，后来发现几个问题

1）初始化页面的时候右边总有个空白边框，改变浏览器大小后消失

2）改变浏览器大小右边和下边有一定几率出现空白边框

3）最大化浏览器后再窗口化浏览器右边和下边100%出现空白边框

网上查了也没看到什么靠谱的说明和好的解决办法，找到一个加延时执行的，在resize()设置延时执行，第一行清空延时，第二行新建延时，也就是用户一直改变浏览器大小不放开鼠标，就会一直清空延时方法，一旦放开鼠标不再改变浏览器大小真正计算元素宽高的语句才会在延时结束后执行，但还是觉得这个不满意

昨天从下午研究到夜里通过js调试发现问题原因也找到了解决办法：

原因：

初始化页面、改变浏览器大小、最大化浏览器后再窗口化浏览器这3个事件发生后第一时间系统会判断内容大小和浏览器大小并决定是否使用滚动条，如果内容大小>浏览器大小就会有滚动条，结果后面通过js计算设定元素宽高后限定了元素宽高导致滚动条消失，但却留下空白滚动条

（我这边就是菜单内容超出浏览器宽高造成body出现滚动条，但是后面我使用jQuery-slimScroll将菜单所在div的宽高和滚动条重新定义了，并且设置了各元素的宽高后滚动条应该由菜单所在div显示，body的滚动条应该消失的，但是却留下了空白的滚动条）

解决办法：

1）在计算元素宽高的第一步就设置body的overflow:hidden

2）后面计算时，body下第一个div的宽高要设定width minWidth height minHeight，并加入以下判断
if(width <= minWidth){
width = minWidth;
$('body').css({overflowX: 'auto'});
}else{
$('body').css({overflowX: 'hidden'});
}
if(height <= minHeight){
height = minHeight;
$('body').css({overflowY: 'auto'});
}else{
$('body').css({overflowY: 'hidden'});

}

这里贴出来假设的代码结构：

别忘了引入jquery.js

<body>
  <div class="container"></div>

<script>
var container_width, container_height, container_minWidth, container_minHeight;
function resizePage(){
  // 注意这里
  $('body').css({overflow: 'hidden'});

  container_width = $(window).width();
  container_height = $(window).height();
  container_minWidth = 700;
  container_minHeight = 500;
  if(container_width <= container_minWidth){
    container_width = container_minWidth;
    $('body').css({overflowX: 'auto'});// 注意这里
  }else{
    $('body').css({overflowX: 'hidden'});// 注意这里
  }
  if(container_height <= container_minHeight){
    container_height = container_minHeight;
    $('body').css({overflowY: 'auto'});// 注意这里
  }else{
    $('body').css({overflowY: 'hidden'});// 注意这里
  }
  $('.container').css({width: container_width+'px', minWidth: container_minWidth+'px', height: container_height+'px', minHeight: container_minHeight+'px'});
}
// 当浏览器窗体大小改变时执行
$(window).resize(function(){
  resizePage();
});

// 初始化页面的时候执行
$(function(){
  resizePage();
});
</script>
</body>

以上结构如果container里内容超出浏览器大小，body就会出现滚动条，后面通过计算限定了container的宽高后container会出现滚动条这时候body的滚动条应该消失的，也许是bug吧导致留下一个空白的滚动条，你们可以在container里加内容试试是否会出现空白滚动条！

终于把这个问题解决了！

js中resize()方法引起的初始化页面空白边框(其实是空白滚动条)、窗口化浏览器页面空白边框、改变浏览器宽高页面空白边框

猜你喜欢