css实现滚动条

系统管理员 2022-05-14 10:18 211阅读 0赞

<!DOCTYPE html>
    <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <meta charset="UTF-8"/>
        <style type="text/css">
            .inner {
                height: 100px;
                width: 200px;
                top: 33px;
                left: 13px;
                overflow: hidden;
                margin: 0 20px;
            }
            .innerbox {
                overflow-x: hidden;
                overflow-y: auto;
                color: #000;
                font-size: .7rem;
                height: 100%;
            }
            .innerbox::-webkit-scrollbar {
                width: 8px;     
                height: 4px;
            }
            .innerbox::-webkit-scrollbar-thumb {
                border-radius: 5px;
                background: #e2e0e1
            }
            .innerbox::-webkit-scrollbar-track{
                border-radius: 5px;
                background: #f6f7fb
            }
    
        </style>
    </head>
    
    <body>
        <div class="inner">
            <div class="innerbox">
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
                <div>aaa</div>  
            </div>
        </div>
    
    </body>
    </html>

这里的代码可以直接拷贝下来放到html文件中运行即可，运行图如下

![70][]

[70]: /images/20220514/43bb8982d226456888f4641a7bb7c41a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 css美化滚动条

::-webkit-scrollbar-track-piece { background-color: fff; -webkit-bor

淡淡的烟草味﹌/ 2023年01月15日 02:19/ 0 赞/ 89 阅读

相关 CSS实现隐藏滚动条并可以滚动内容

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看

比眉伴天荒/ 2022年12月19日 06:12/ 0 赞/ 122 阅读

相关 CSS 滚动条属性

> 有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如

淡淡的烟草味﹌/ 2022年09月26日 00:21/ 0 赞/ 207 阅读

相关 css 实现进度条条形码和滚动

进度条实现隔色条形用到 background-imag .progress-blue2{ background-image: -webkit-lin

ゝ一纸荒年。/ 2022年05月31日 04:25/ 0 赞/ 200 阅读

相关 css实现隐藏滚动条

css实现隐藏滚动条关键代码如下： //样式 .hide-bar{ width:100px; height:100px;

拼搏现实的明天。/ 2022年05月15日 04:12/ 0 赞/ 255 阅读

相关 css实现滚动条

<!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

系统管理员/ 2022年05月14日 10:18/ 0 赞/ 212 阅读

相关滚动条样式css

![在这里插入图片描述][20190702143854151.png] / 滚动条 / ::-webkit-scrollbar { width:

深藏阁楼爱情的钟/ 2021年12月18日 13:37/ 0 赞/ 353 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

1. 1. 主要代码：　　ul ::-webkit-scrollbar\{

Bertha 。/ 2021年10月23日 07:13/ 0 赞/ 434 阅读

相关 CSS 实现隐藏滚动条滚动

需求：当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。 css伪类元素控制 body::-webkit-s

╰半夏微凉°/ 2021年09月19日 01:36/ 0 赞/ 449 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： :

╰+哭是因爲堅強的太久メ/ 2021年07月04日 21:32/ 0 赞/ 616 阅读