JavaScript 中 clientWidth、clientHeight 与滚动条的关系
浏览数：22 /
时间：2015年06月09日
用 jQuery 写着一个相册，在测试过程中，发现点击缩略图，弹出大图后，页面会往左偏移一点，关闭大图后又回到原地。
这个现象只在 Chrome 发生，不在 Firefox 发生。于是我很自然地想到，是浏览器默认样式的问题，于是用了个 html5-reset.css。问题解决（至少我以为）。
结果后来又发生了同样的状况，这次我开始查看源代码，发生问题出自于 clientWidth 和 clientHight 这两个属性。
这两个属性其实就是所谓的「视口」（viewpoint），就是浏览器窗口的大小，但是，这是不包括滚动条的。也就是说，在页面下拉生成滚动条后，clientWidth 会变小，在某些情况下会造成麻烦。
解决问题很简单，就是强制一直显示滚动条，那样的话，clientWidth 的值就不会变了。
只需在 CSS 里添加一条 html{min-height: 101%;}。话说页面元素不多，无法铺满整个视口，但想固定 footer 在页面底部时，也可以用这个。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
