css增加横着滚动条_滚动条美化(支持横向)

最新推荐文章于 2023-08-01 22:53:51 发布
最新推荐文章于 2023-08-01 22:53:51 发布
阅读量680 收藏 1
点赞数
文章标签： css增加横着滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31748999/article/details/114492240
版权

.scrollbar {

margin-left:30px;

float:left;

height:300px;

width:65px;

background:#F5F5F5;

overflow-y:scroll;

margin-bottom:25px;

}

.force-overflow {

min-height:450px;

min-width:500px;

}

#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;

}

/*

* 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%);

}

你似风儿温柔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
smooth-scrollbar:可定制，可插入和高性能的滚动条！
05-11
平滑滚动条 可定制，灵活和高性能的滚动条！ 安装 :warning: 除非您知道自己在做什么，否则请勿使用自定义滚动条。 告诉我你 通过NPM （推荐） ： npm install smooth-scrollbar --save 通过凉亭： bower install smooth-scrollbar --save 浏览器兼容性 浏览器 版本 IE 10+ Chrome合金 22岁以上 火狐浏览器 16岁以上 苹果浏览器 8+ Android浏览器 4+ 适用于Android的Chrome 32+ iOS Safari 7+ 演示版 用法 由于此软件包具有pkg.module字段，因此强烈建议使用一些打包程序（如webpack或rollup）将其作为ES6模块导入： import Scrollbar from 'smooth-scrollbar' ; Scrollbar .
使用css优化页面横向/纵向滚动条样式
w13966597931的博客
04-14 1966
第一段是纵向的、第二段是横向的。如果横向纵向都要添加，那么，两个都复制即可。less要不要无所谓，要了就是仅在当前页面生效。
纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
ma524654165的博客
09-08 6133
最近做的后台管理系统要处理大量的表格 原项目是采用的for循环加拼接字符串的方式实现;导致js代码一大堆;各种单引号和双引号的嵌套;让人头疼;遂引入vue.js;用v-for做模板渲染;工作量顿时减轻不少,心情舒畅; 文字被强制换行了 由于个别表的列数较多;文字都挤在一起向下换行了;现场惨不忍睹;于是采用强制不换行的方式 div{ white-space: nowrap
css滚动条设置（选择器）
weixin_49934623的博客
11-18 930
::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动条轨道. ::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分. ::-webkit-scrollbar-corner — 当同时有垂直滚动条和水平滚动条时交汇的部分. ::-webki
Table样式
yuzheh521的博客
11-11 226
<style type="text/css"> table { border-collapse: collapse; margin: 0 auto; text-align: center; } table td, table th { border: 1px solid #cad9ea; colo.
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
主要介绍了详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js模拟滚动条(横向竖向)
10-27
js模拟滚动条(横向竖向)，需要的朋友可以参考一下
实例讲解DataTables固定表格宽度(设置横向滚动条)
12-29
默认的100%宽要实现改变窗口大小也100%的话，在table元素上添加width=”100%”,至于css的100%为什么不生效，原因未知。 下面就说说设置如何给datatables设置固定的宽度。 1、html代码 <th style=di
jQuery+CSS3横向纵向滚动条代码.rar
10-02
jQuery+CSS3横向纵向滚动条代码.rar
CSS实现横向滚动
逆袭的菜鸟X
03-12 6169
<div class="scroll"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</d...
6.7 横向滚动方案（移动端），滚动条美化（PC），render概述，sublime短横杠选中，方法计算属性渲染次数，父子组件单位衡量
qq_40196738的博客
06-12 337
一、横向滚动方案 // 1、overflow-x和white-space实现，SCSS部分代码如下 .mall-navbar { width: 100%; padding: 10px; box-sizing: border-box; .navbar-wrapper { overflow-x: scroll; white-space: nowrap; ...
给表格加上横向、纵向滚动条并对滚动条进行美化
qq_29715077的博客
07-28 699
<!DOCTYPE html> <html lang="en"> <head> <style> .table-10 { width: 300px; } /* 横向滚动条 */ .table-box { white-space: nowrap; overflow-x: auto; .
css滚动条样式指南
qq_42880714的博客
08-01 9942
css滚动条样式指南
div横向超出可滚动，自动添加滚动条，自定义滚动条样式，
热门推荐
海贼王某人的博客
05-11 1万+
先看一下最终的效果图吧： 第一种文字内容超出显示滚动条： 父盒子：横向超出滚动：overflow-x: scroll; .box { width: 100%; box-sizing: border-box; overflow-x: scroll; } 子盒子：内容不换行 white-space:nowrap; .item { white-space:nowrap; } 实现效果，超出滚动：如下图： 这个会发现即使内容没超出还是有滚动条占位如下图： 这里吧**overflow-x:
用CSS美化滚动条
wanngxue的博客
11-14 579
如何用CSS修改/美化浏览器页面上出现的滚动条。改变它们的颜色，调整它们的外形，适配对页面UI设计。我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性，最后，还将介绍如何用jQuery支持其它类型的浏览器。各种浏览器对CSS滚动条的支持情况 这里说的Webkit浏览器包括谷歌浏览器，苹果公司的Safari浏览器,以及最新的Opera浏览器。这些浏览器加起来占有超过半数的桌面浏览器市场份额
css改变滚动条样式
weixin_30266829的博客
12-27 233
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 12px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shado...
css自定义横向滚动条样式,css滚动条样式自定义
weixin_32257101的博客
08-04 7206
很简单的几行代码Title* {margin: 0;padding: 0;}.out {width: 600px;height: 600px;margin: 100px auto;overflow-y: auto;}/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */.out::-webkit-scrollbar {width: 5px;height: 5px;}/* 滚动条里面小方块 */...
如何美化滚动条
Rouqier的博客
04-22 1580
1.如何美化滚动条（一般在移动端使用） 以下就是美化属性，直接写在css公共样式里面 .scrollable { overflow: auto; } .scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .scrollable::-webkit-scrollbar-thumb { border-radius: 5px; background: #dddddd; } .scrollable::
css设置横向滚动条
最新发布
12-13
以下是使用CSS设置横向滚动条的方法： 1. 首先，需要将包含内容的元素设置为具有固定宽度和超出隐藏的属性。例如，下面的代码将创建一个宽度为300px的div元素，并将其内容隐藏： ```css div { width: 300px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值