html 滚动条

🌙
手机阅读
本文目录结构

html 滚动条

在 html 网页中,我们都知道大篇幅的长文章会占据网页的大部分空间,影响了整体网站页面的美观性和阅读体验,因此,在 html 网页中添加一个带有滚动条的文本框,就可以很好地解决上述问题。网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,下面就是相关语法:

主要是借助 CSS 来实现

核心代码

<div
    align=center
    style='
    color: #ffffff;
    background-color: #000000;
    border: 1px solid red;
    height: 200px;
    overflow: scroll;
    scrollbar-face-color: #889B9F;
    scrollbar-shadow-color: #3D5054;
    scrollbar-highlight-color: #C3D6DA;
    scrollbar-3dlight-color: #3D5054;
    scrollbar-darkshadow-color: #85989C;
    scrollbar-track-color: #95A6AA;
    scrollbar-arrow-color: #FFD6DA;
'>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
    日志文字<br/>
</div>
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字
日志文字

滚动条美化

<style>
.box{
    width: 200px;
    height: 100px;
    background-color: pink;
    overflow: scroll;
    font-size: 20px;
    line-height: 40px;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.box::-webkit-scrollbar
{
    width: 16px;
    height: 16px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影 + 圆角*/
.box::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影 + 圆角*/
.box::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}
</style>
<div class="box">我是特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长的测试文字</div>
我是特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长特别长的测试文字

更多 HTML 搜索

通过查看前端开发者在搜索引擎里的搜了哪些 HTML 内容,可以知道他们实际工作使用了什么技术或者什么地方薄弱;

你可以通过点击 HTML 常见搜索 来查看前端开发者都在搜哪些内容;

注:这里仅收录了常见搜索,并不是无论搜索什么都记录在里面的;

如果你是为了面试做准备的,那么推荐你查看 HTML面试题,这里基本包涵了市场上的所有 HTML 方面的面试题,让你更加牢固的掌握 HTML 知识

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了