【css】overflow

最新推荐文章于 2020-08-28 11:51:36 发布

richest_qi

最新推荐文章于 2020-08-28 11:51:36 发布

阅读量3.4k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107431418

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

文章目录

- - - 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。

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【css】overflow

overflow<body> <div class="container"> <div class="content"></div> </div></body> .container{ width:100px;height:100px; padding:5px; border:5px solid darkorch
复制链接

扫一扫

专栏目录