自定义样式的滚动条

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动条样式的自定义</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .scrollbar {
            /*margin-left: 30px;*/
            float: left;
            height: auto;
            width: 100%;
            background: #F5F5F5;
            /*overflow-y: scroll;*/
            /*margin-bottom: 25px;*/
        }

        .force-overflow {
            /*min-height: 450px;*/
        }
        #style-bar::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
            background-color: #F5F5F5;
            border-radius: 10px;
        }

        #style-bar::-webkit-scrollbar {
            width: 10px;
            background-color: #F5F5F5;
        }

        #style-bar::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: #FFF;
            background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6,#54DE5D))
        }
    </style>
</head>
<body  class="scrollbar" id="style-bar">
    <div class="force-overflow"></div>
   <div>
        头<br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        1 <br/>
        尾<br/>
    </div>
</body>
</html>

效果图：

时间： 2024-10-05 15:27:51

自定义样式的滚动条的相关文章

WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式

原文:WPF自定义控件与样式(6)-ScrollViewer与ListBox自定义样式一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: ScrollViewer的样式拆解及基本样式定义: ListBox集合控件的样式定义: 二．ScrollViewer自定义样式 ScrollViewer在各种列表.集合控件中广泛使用的基础组建,先看看效果图: 如上图,

Swing自定义JScrollPane的滚动条设置,重写BasicScrollBarUI方法

Swing自定义JScrollPane的滚动条设置,重写BasicScrollBarUI方法摘自:https://blog.csdn.net/qq_31635851/article/details/80986870 1.自定义BasicScrollBarUI类 1 import java.awt.AlphaComposite; 2 import java.awt.Color; 3 import java.awt.Dimension; 4 import java.awt.GradientPain

WPF DataGrid自定义样式

WPF DataGrid自定义样式微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. 在DataGrid中的最高水平,你可以改变的外观和感觉,通过设置一些: Property Type Values Default AlternatingRowBackground Brush Any Brush Null Background Brush Any

WPF自定义样式篇-DataGrid

WPF自定义样式篇-DataGrid 先上效果图: 样式:  <Style TargetType="DataGrid"> <Setter Property="RowHeaderWidth" Value="0"></Setter> <Setter Property="AutoGenerateColumns"

超详细的Xcode代码格式化教程，可自定义样式

为什么要格式化代码当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题. 在之前,我们可能会写完代码后,再一点一点去调格式,很浪费时间. 有了ClangFormat插件后,就可以一键把代码格式化成统一的样式,不仅节省了时间,也使得代码更规范.我们还可以定制自己喜欢的样式. 安装ClangFormat插件可以手动安装(下载GitHub项目编译),也可以用Alcatraz(插件管理器)安装,都很简单,具体可以看我的文章<Xcode方便开发的插件推荐>

SeekBar自定义样式

网上的SeekBar自定义样式的资料很多,大多是抄来抄去.我最近用到这个,也从网上抄了一个,但是遇到不少问题,其中一个就是SeekBar的背景条不显示,最后才找到解决方法. 1. 使用自定义SeekBar <SeekBar android:id="@+id/ctrl_seekBar" android:layout_width="wrap_content" android:layout_height="wrap_content" androi

[android] 安卓自定义样式和主题

简单练习自定义样式和主题,样式是加在View上,主题是加在Application或者Activity上 styles.xml <?xml version="1.0" encoding="utf-8"?> <resources xmlns:android="http://schemas.android.com/apk/res/android">  <style name=&quo

纯css兼容个浏览器input[type='radio']不能自定义样式

各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-account"> <input type="checkbox"> <span>记住账号</span> </div> //css .remember-account { display: inline-block; font-siz

很酷的伸缩导航菜单效果，可自定义样式和菜单项。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ