JavaScript 中 clientWidth、clientHeight 与滚动条的关系

用 jQuery 写着一个相册,在测试过程中,发现点击缩略图,弹出大图后,页面会往左偏移一点,关闭大图后又回到原地。

 

这个现象只在 Chrome 发生,不在 Firefox 发生。于是我很自然地想到,是浏览器默认样式的问题,于是用了个 html5-reset.css。问题解决(至少我以为)。

 

结果后来又发生了同样的状况,这次我开始查看源代码,发生问题出自于 clientWidth 和 clientHight 这两个属性。

 

这两个属性其实就是所谓的「视口」(viewpoint),就是浏览器窗口的大小,但是,这是不包括滚动条的。也就是说,在页面下拉生成滚动条后,clientWidth 会变小,在某些情况下会造成麻烦。

 

解决问题很简单,就是强制一直显示滚动条,那样的话,clientWidth 的值就不会变了。

 

只需在 CSS 里添加一条 html{min-height: 101%;}。话说页面元素不多,无法铺满整个视口,但想固定 footer 在页面底部时,也可以用这个。

JavaScript 中 clientWidth、clientHeight 与滚动条的关系

上一篇:WEB技术书籍推荐


下一篇:网页中密码强度验证原理。