您的位置:首页 > Web前端 > JavaScript

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

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

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

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

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

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

只需在 CSS 里添加一条 html{min-height: 101%;}。话说页面元素不多,无法铺满整个视口,但想固定 footer 在页面底部时,也可以用这个。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐