html 滚动条

🌙
手机阅读
本文目录结构
axihe

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 / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang