css滚动条

最新推荐文章于 2023-11-02 20:41:04 发布
最新推荐文章于 2023-11-02 20:41:04 发布
阅读量118 收藏
点赞数
分类专栏： css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3自定义滚动条</title>
<style>
header
{
    font-family: 'Lobster', cursive;
    text-align: center;
    font-size: 25px;    
}

#info
{
    font-size: 18px;
    color: #555;
    text-align: center;
    margin-bottom: 25px;
}

a{
    color: #074E8C;
}

.scrollbar
{
    margin-left: 30px;
    float: left;
    height: 300px;
    width: 65px;
    background: #F5F5F5;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.force-overflow
{
    min-height: 450px;
}

#wrapper
{
    text-align: center;
    width: 500px;
    margin: auto;
}

/*
 *  STYLE 1
 */

#style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    /*background-color: #D62929;*/
    background: rgba(255,255,255,0.75);
}

/*
 *  STYLE 3
 */

#style-3::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
}

#style-3::-webkit-scrollbar-thumb
{
    background-color: #000000;
}

/*
 *  STYLE 4
 */

#style-4::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

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

#style-4::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}


/*
 *  STYLE 5
 */

#style-5::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

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

#style-5::-webkit-scrollbar-thumb
{
    background-color: #0ae;
    
    background-image: -webkit-gradient(linear, 0 0, 0 100%,
                       color-stop(.5, rgba(255, 255, 255, .2)),
                       color-stop(.5, transparent), to(transparent));
}


/*
 *  STYLE 6
 */

#style-6::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

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

#style-6::-webkit-scrollbar-thumb
{
    background-color: #F90;    
    background-image: -webkit-linear-gradient(45deg,
                                              rgba(255, 255, 255, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, .2) 50%,
                                              rgba(255, 255, 255, .2) 75%,
                                              transparent 75%,
                                              transparent)
}


/*
 *  STYLE 7
 */

#style-7::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

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

#style-7::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                                       left bottom,
                                       left top,
                                       color-stop(0.44, rgb(122,153,217)),
                                       color-stop(0.72, rgb(73,125,189)),
                                       color-stop(0.86, rgb(28,58,148)));
}

/*
 *  STYLE 8
 */

#style-8::-webkit-scrollbar-track
{
    border: 1px solid black;
    background-color: #F5F5F5;
}

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

#style-8::-webkit-scrollbar-thumb
{
    background-color: #000000;    
}


/*
 *  STYLE 9
 */

#style-9::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

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

#style-9::-webkit-scrollbar-thumb
{
    background-color: #F90;    
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(255, 255, 255, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, .2) 50%,
                                              rgba(255, 255, 255, .2) 75%,
                                              transparent 75%,
                                              transparent)
}


/*
 *  STYLE 10
 */

#style-10::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

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

#style-10::-webkit-scrollbar-thumb
{
    background-color: #AAA;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(0, 0, 0, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(0, 0, 0, .2) 50%,
                                              rgba(0, 0, 0, .2) 75%,
                                              transparent 75%,
                                              transparent)
}


/*
 *  STYLE 11
 */

#style-11::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

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

#style-11::-webkit-scrollbar-thumb
{
    background-color: #3366FF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(0deg,
                                              rgba(255, 255, 255, 0.5) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, 0.5) 50%,
                                              rgba(255, 255, 255, 0.5) 75%,
                                              transparent 75%,
                                              transparent)
}

/*
 *  STYLE 12
 */

#style-12::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #444444;
}

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

#style-12::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
                                              transparent,
                                              rgba(0, 0, 0, 0.4) 50%,
                                              transparent,
                                              transparent)
}

/*
 *  STYLE 13
 */

#style-13::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #CCCCCC;
}

#style-13::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-13::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #D62929;
    background-image: -webkit-linear-gradient(90deg,
                                              transparent,
                                              rgba(0, 0, 0, 0.4) 50%,
                                              transparent,
                                              transparent)
}

/*
 *  STYLE 14
 */

#style-14::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    background-color: #CCCCCC;
}

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

#style-14::-webkit-scrollbar-thumb
{
    background-color: #FFF;
    background-image: -webkit-linear-gradient(90deg,
                                              rgba(0, 0, 0, 1) 0%,
                                              rgba(0, 0, 0, 1) 25%,
                                              transparent 100%,
                                              rgba(0, 0, 0, 1) 75%,
                                              transparent)
}

/*
 *  STYLE 15
 */

#style-15::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

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

#style-15::-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 16
 */

#style-16::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

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

#style-16::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-linear-gradient(top,
                                              #e4f5fc 0%,
                                              #bfe8f9 50%,
                                              #9fd8ef 51%,
                                              #2ab0ed 100%);
}


</style>
</head>
<body>
      <div id="wrapper">
        <div class="scrollbar" id="style-default">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-1">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-2">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-3">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-4">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-5">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-6">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-7">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-8">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-9">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-10">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-11">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-13">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-14">
          <div class="force-overflow"></div>
        </div>

        <div class="scrollbar" id="style-15">
          <div class="force-overflow"></div>
        </div>
    </div>
</body>
</html>
一梦醉殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 滚动条换色调整代码
12-10
我们将主要关注在IE浏览器下的CSS滚动条样式调整，同时也会提及Firefox浏览器的解决方案。 在IE浏览器中，我们可以利用CSS扩展属性来改变滚动条的外观。这些扩展属性包括`scrollbar-face-color`、`scrollbar-shadow...
详解如何自定义CSS滚动条的样式
09-22
本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS设置滚动条样式
cc蒲公英的博客
04-21 6万+
CSS设置滚动条样式 因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示：   下面就讲解这几个属性怎么使用，代表什么意思。 一：webkit下面的CSS设置滚动条 主要有下面7个属性 ::-webkit-scr
怎么用css设置滚动条
lilikk1314的博客
09-17 1万+
写后台项目,侧边栏和内容主体部分单独有自己的滚动区域--就是自己在自己的区域玩 所以需要给侧边栏和内容主体添加自己的滚动条 需要一个外层盒子,滚动条才能根据内容滚动 <div class="scrollbox"> 内容部分 </div> //用的less写的 <style> .scrollbox { height: 100%; width: 100%; overflow: auto; // 滚动条整体部分 &::-
CSS实现隐藏滚动条但是可以滚动
祈澈菇凉
04-10 5万+
今天记录一个很小的问题，在工作之中会经常遇到的，当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。 body::-webkit-scrollbar { display: none; } 示例代码 <!DOCTYPE html> <html> <he...
怎么样在div+css中设置一个div的框并出现滚动条
evilcry2012的专栏
12-01 3万+
怎么样在div+css中设置一个div的框并出现滚动条 50 怎么样在div+css中设置一个div，给他设置宽和高，并让他出现滚动条 匿名 | 浏览 15970 次 |举报 我有更好的答案 推荐于2017-06-16 14:41:29 最佳答案 这里是你要显示的内容  本回答由网友推荐 举报| 答案纠错 | 评论(3
纯css，div隐藏滚动条，保留鼠标滚动效果。
热门推荐
liusaint1992的专栏
04-28 8万+
隐藏div滚动条，但是保留滚动功能。
CSS 滚动条
weichenyang的博客
08-03 1165
【代码】CSS 滚动条。
CSS 滚动条样式美化
dark_cy的博客
07-30 1472
滚动条主要属性 ::-webkit-scrollbar：滚动条整体部分 ::-webkit-scrollbar-thumb：滚动条里面的滑块 ::-webkit-scrollbar-track： 滚动条的轨道 ::-webkit-scrollbar-button： 滚动条轨道两端的按钮，允许通过点击微调滑块的位置 ::-webkit-scrollbar-track-piece：内层轨道，滚动条中间部分 ::-webkit-scrollbar-corner：边角，及两个滚动条的交汇处 ::-webkit-r
css滚动条样式指南
qq_42880714的博客
08-01 1万+
css滚动条样式指南
css 滚动条不起作用
Littlegirlha的博客
11-02 714
是因为滚动条的外面可能还有滚动条，overflow 可能不是visible. 所以滚动条还是放在外层好。实在不行外层的overflow也要改。滚动条可以正确展示，不能使用。
一款好看的DIV+CSS滚动条
04-30
标题提及的"一款好看的DIV+CSS滚动条"是指利用这种方法创建的自定义滚动条，它可以提升网站的用户体验和视觉吸引力。 滚动条通常在内容超过容器显示范围时出现，允许用户浏览隐藏的部分。在默认情况下，浏览器会...
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
然而，这种方式在遇到滚动条时会出现一个问题，即页面内容在滚动条出现和消失时发生跳动，影响用户体验。这是因为滚动条的出现会占据页面的可用宽度，导致原本居中的内容发生偏移。 为了解决这个问题，通常有两种...
ArcGIS Engine编程初学至精通指南
最新发布
07-23
《ArcGIS Engine开发从入门到精通》是一套全面讲解GIS技术与ArcGIS Engine应用的教程。ArcGIS Engine是由Esri公司推出的强大地理信息系统开发平台，它允许开发者利用.NET、Java等编程语言创建桌面、Web及移动GIS应用程序。本教程旨在帮助初学者和有一定经验的GIS从业者快速掌握ArcGIS Engine的核心技术和实际应用。 1. **GIS基础概念**：我们需要理解什么是GIS（Geographic Information System，地理信息系统），它是如何整合地理位置数据和属性数据，以及如何通过地图进行数据的可视化和分析。 2. **ArcGIS Engine介绍**：ArcGIS Engine是Esri GIS技术栈的一部分，提供了丰富的GIS组件，包括地图显示、图层管理、地理处理工具、查询功能等，用于构建自定义的GIS应用。 3. **开发环境配置**：讲解如何设置开发环境，包括安装ArcGIS Engine SDK，集成开发环境（如Visual Studio）的配置，以及必要的开发工具和库的添加。 4. **基础控件与组件
springboot整合MinIO中间件，实现文件便捷管理
07-23
springboot整合MinIO中间件，实现文件便捷管理
C#语言实现的百度关键词点击代码，采用外部浏览器控制
07-23
标题中的“C#百度关键词点击源码(外部浏览器操作)”是指使用C#编程语言编写的一段代码，其目的是模拟用户行为，对百度搜索引擎中的特定关键词进行自动点击。这种技术在SEO（搜索引擎优化）领域可能会被用到，以提高网站在搜索结果中的排名。 在SEO中，关键词点击率是影响网站排名的一个重要因素。正常情况下，用户对某个搜索结果的点击次数多，搜索引擎会认为该结果更符合用户的搜索需求，从而提升其在搜索结果中的位置。然而，手动模拟大量点击既耗时又不实际，因此开发这样的源码可以自动化这一过程，但需要注意的是，如果被搜索引擎检测到异常，可能会被视为违反其使用政策，导致网站被降权甚至被屏蔽。 描述中提到的“浏览器外部操作”意味着这个C#程序不会直接嵌入到浏览器内部，而是作为一个独立的应用程序运行，通过API或者模拟键盘鼠标操作与浏览器进行交互。这种方式可能包括使用自动化测试框架如Selenium，或者利用Windows API来模拟用户输入和页面交互。这样的设计可以避免因修改浏览器行为而引起的安全问题，同时也能更好地模拟真实用户的行为。 标签“SEO源码”表明这段代码是针对搜索引擎优化目的编写的，可能
嵌入式LinuxC语言程序设计基础教程第8章函数解读.doc
07-23
嵌入式
C#开发的企业人力资源管理信息系统，含源码、文档及构建流程
07-23
企业人事信息管理是企业管理中的一个重要内容，随着时代的进步，企业人员数量也不断增加、分工的不断细化、各个行业间联系的不断密切，对人事管理的要求也不断提高。如何管理好企业内部员工的信息，对员工实施高效的宏观管理，对企事业单位的人员构成情况和发展趋势进行统计、规划、分析并制定切实可行的人事政策，是一项繁重而艰巨的任务。 本文是采用C#作为前台开发工具，SQL Server2000作为后台数据库平台的基于C/S的两层模式的管理系统。旨在实现对现有的企业人事管理工作中遇到的各种情况和大量数据在数据库存储的基础上，提供信息咨询，信息检索，信息存取等服务，在此论文中主要实现对存储在数据库中的数据表进行这些简单的操作，为提高企业人事管理效率提供了行之有效的手段。 关键词：C#；数据库表；SQL Server2000；企业人事管理。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
css 滚动条
05-24
CSS中可以通过使用`::-webkit-scrollbar`伪元素来定制滚动条的样式。以下是一个简单的示例： ```css /* 设置滚动条的宽度和高度 */ ::-webkit-scrollbar { width: 10px; height: 10px; } /* 设置滚动条的背景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值