横向、纵向带滚动条

最新推荐文章于 2024-05-06 11:24:34 发布

weixin_30520015

最新推荐文章于 2024-05-06 11:24:34 发布

阅读量392

点赞数

原文链接：http://www.cnblogs.com/hellojavascript/p/10280423.html

版权

<style>
    .div1{
        width: 400px;
        height: 500px;
        overflow: scroll;
    }
    .div1 img{
        width: 100%;
      /* height: 100px;*/
    }
    /*只显示纵向height:1px，只显示横向width:1px*/
    .div2::-webkit-scrollbar
    {
        width: 16px;  /*滚动条宽度*/
        height: 1px;  /*滚动条高度*/
    }
    .div2::-webkit-scrollbar-track {/*滚动条里面轨道颜色*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #c9c9c9;
    }
    /*定义滑块 内阴影+圆角*/
    .div2::-webkit-scrollbar-thumb
    {
       /* border-radius: 10px; */ /*滚动条的圆角*/
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        font-weight:bold;">green;  /*滚动条的背景颜色*/
    }
</style>


<body>

<div class="div1 div2">
    <img src="img/gundong.png" alt="">
</div>

</body>

转载于:https://www.cnblogs.com/hellojavascript/p/10280423.html

weixin_30520015

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
横向、纵向带滚动条

<style> .div1{ width: 400px; height: 500px; overflow: scroll; } .div1 img{ width: 100%; /* height: 100px;*/ } /*只显示纵向height:1px，只显示横向width:1px*/ ...
复制链接

扫一扫