【css】overflow
文章目录
- overflow
- 计算滚动条宽度
overflow
<body><div class="container"><div class="content"></div></div>
</body>
.container{width:100px;height:100px;padding:5px;border:5px solid darkorchid;}.content{width:200px;height:200px;background-color:lightsalmon}
overflow在实现两栏自适应布局上发挥了作用，但它的本来用途是 裁剪，且有四个属性值。
visible
默认值。
hidden
裁剪。从border的内边缘开始裁剪。
scroll
滚动条一直存在。auto
容器尺寸足够，不需要滚动时不显示滚动条；
容器尺寸不足，需要滚动条时才显示滚动条。
计算滚动条宽度
说到滚动条，滚动条时占据页面空间的，占多少空间呢？有两种计算方法。
- 方法1：
window.innerWidth-document.documentElement.clientWidth
得17px，即 滚动条宽度是17px。
<!DOCTYPE html>
<html>
<head><style>.box{width:200px;height:1000px;border:1px solid transparent;}</style>
</head>
<body><div class="box"></div>
</body>
</html>
- 方法2：借用一个具有
overflow:scroll的元素
<body><script>var box = document.createElement('div');box.style.cssText = 'width:100px;height:100px;overflow:scroll;'document.body.appendChild(box);var scrollWidth = box.offsetWidth-box.clientWidth;console.log(scrollWidth);document.body.removeChild(box);box = null;</script>
</body>
得到的结果也是17px。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！