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 在页面底部时,也可以用这个。
这个现象只在 Chrome 发生,不在 Firefox 发生。于是我很自然地想到,是浏览器默认样式的问题,于是用了个 html5-reset.css。问题解决(至少我以为)。
结果后来又发生了同样的状况,这次我开始查看源代码,发生问题出自于 clientWidth 和 clientHight 这两个属性。
这两个属性其实就是所谓的「视口」(viewpoint),就是浏览器窗口的大小,但是,这是不包括滚动条的。也就是说,在页面下拉生成滚动条后,clientWidth 会变小,在某些情况下会造成麻烦。
解决问题很简单,就是强制一直显示滚动条,那样的话,clientWidth 的值就不会变了。
只需在 CSS 里添加一条 html{min-height: 101%;}。话说页面元素不多,无法铺满整个视口,但想固定 footer 在页面底部时,也可以用这个。
相关文章推荐
- 关于使用javascript让层居中的问题document.documentElement.clientHeight和document.documentElement.clientWidth
- javascript高级程序设计(三)offsetLeft ,offsetTop,offserHeight,offsetWidth,clientHeight,clientWidth
- javascript---之clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight等窗口属性说明
- javascript获得元素的尺寸和位置二 : clientWidth/Height、scrollWidth/Height、scrollTop/Left
- 详解javascript中offsetTop/Left、offsetWidth/Height、clientWidth/clientHeight
- JavaScript概念之screen/client/offset/scroll/inner/avail的..width/height
- javascript获得元素的尺寸和位置二 : clientWidth/Height、scrollWidth/Height、scrollTop/Left
- Javascritp client,offset,scroll的区别,这里只说width和height
- js利用offsetWidth和clientWidth来计算滚动条的宽度
- 关于clientHeight/clientWidth和scrollHeight/scrollWidth的相关知识点
- 让你彻底明白pageWidth、clientHeight、clientWidth、scrollTop、 scrollLeft、scrollHeight、scrollWidt的含义和用法
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- scrollTOP scrollLeft clientHeight clientWidth 的各浏览器版修正
- 客户区大小 clientWidth & clientHeight
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉
- JavaScript 学习笔记(五)广告、.ActiveXObject、scrollTop、.onscroll、clearTimeout()、return;、clientWidth
- 看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
- 兼容各浏览器的clientWidth,clientHeight,scrollWidth,scrollHeight,scrollLeft,scrollTop
- javascript使用image.height和image.width获取图片宽高值为0,获取失败的原因
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异