html - 使用自定义滚动条来包含文本?

标签 html css

我编辑了一些很酷的滚动条。我需要将文本放在中间,所以它就像一个框架......就像你在接受某人的服务条款和内容时看到的那样。我尝试添加文本,但我似乎无法让它工作? http://jsfiddle.net/Hunter4854/RHMCm/如果您有问题,请不要投反对票,只需添加评论,我会回答:)

最佳答案

<head>
<meta content="en-us" http-equiv="Content-Language">
<style>body {
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: green;
}

.a::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.a::-webkit-scrollbar:vertical {
    background: -webkit-linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}

.a::-webkit-scrollbar:horizontal {
    background: -webkit-linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}

.a::-webkit-scrollbar-track:vertical {
    background: -webkit-linear-gradient(left, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* W3C */
    border-radius: 15px;
}

.a::-webkit-scrollbar-track:horizontal {
    background: -webkit-linear-gradient(top, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #1d1d1d 0%,#1b1b1b 50%,#171717 50%,#1d1d1d 100%); /* W3C */
    border-radius: 15px;
}

.a::-webkit-scrollbar-thumb {
    border-radius: 15px;
    border: 1px solid black;
}

.a::-webkit-scrollbar-thumb:vertical {
    background: -webkit-linear-gradient(left, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* W3C */
}

.a::-webkit-scrollbar-thumb:horizontal {
    background: -webkit-linear-gradient(top, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #878787 0%,#474747 50%,#282828 50%,#4a4a4a 100%); /* W3C */
}

.a::-webkit-scrollbar-thumb:hover {
}

.a::-webkit-scrollbar-corner {
    background: black;
}

.a::-webkit-scrollbar-button:vertical {
    background: -webkit-linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(left, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}

.a::-webkit-scrollbar-button:horizontal {
    background: -webkit-linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(top, #525252 0%,#202020 50%,#020202 50%,#101010 100%); /* W3C */
}
​</style>



</head>



<div class="a" style="position:absolute;width:200px;height:200px;background:white;overflow-y:scroll">
    </div>

在这里查看 http://jsfiddle.net/3uTjv/

关于html - 使用自定义滚动条来包含文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10400085/

相关文章:

javascript - 图像之间连续淡入淡出和旋转

html - Play 元素中所有 HTML 的全局 CSS

HTML 文本背景颜色不适用于 <span>

javascript - CSS [attribute=value] 选择器没有被应用

javascript - 意外行为 : absolute positiong & $(window). resize()

css - 将 fontawesome 图标与 Flexbox 垂直对齐

javascript - HTML5 视频播放器全屏问题

html - 分屏设计布局,一半可滚动内容有巨大的留白区域,无法去除留白

javascript - 轻量级的Web和移动“所见即所得”文本编辑器?

html - 在 CSS flexbox 的粘性页眉和页脚中仅滚动子标题下的中间内容