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 知识