当overflow :scroll 出现滚动条后,默认的滚动条样式太丑了,不是我们想要的,那么我们来修改一下吧!~ 话不多说,直接上代码 

/* 定义滚动条样式 */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(180, 180, 180, .5);
  border-radius: 10px;
  
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(180, 180, 180, .5);
  
}
 
好啦,完美实现,看一下效果吧
 
 
 
/********
*
* .-~~~~~~~~~-._ _.-~~~~~~~~~-.
* __.' 欢迎访问 ~. .~ `.__
* .'// 我的博客 \./ ☞ 送你小 ☜ \\`.
* .'// | \\`.
* .'// .-~"""""""~~~~-._ | _,-~~~~"""""""~-. \\`.
* .'//.-" `-. | .-' "-.\\`.
* .'//______.============-.. \ | / ..-============.______\\`.
* .'______________________________\|/______________________________`.
*/

overflow:scroll修改样式的更多相关文章

  1. iScroll框架解析——Android 设备页面内 div(容器,非页面)overflow:scroll; 失效解决(转)

    移动平台的活,兼容问题超多,今儿又遇到一个.客户要求在弹出层容器内显示内容,但内容条数过多,容器显示滚动条.按说是So easy,容器设死宽.高,CSS加属性 overflow:scroll; -we ...

  2. 解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

    解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-o ...

  3. 微信小程序弹框wx.showModal如何修改样式

    由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如 ...

  4. JavaScript基础之DOM修改样式

    1.获取或设置元素的内容:3个属性:   1. innerHTML: 获取或设置元素开始标签到结束标签之间的所有HTML代码原文.      何时使用:只要获得完整的html代码原文时      优化 ...

  5. 【写一个自己的js库】 5.添加修改样式的方法

    1.根据id或class或tag修改样式,样式名是-连接格式的. function setStyleById(elem, styles){ if(!(elem = $(elem)) return fa ...

  6. 总结:js中4类修改样式的方法

    前言 最近在写一个扩展右键菜单的插件,既然是插件,想着一步到位,把相关的style样式设置都丢进js文件中,直接加载一个js文件便可以使用该插件,所以今天就研究了下js批量的插入样式的方法,即addS ...

  7. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  8. js修改样式表规则

    <div>adasfsfs</div> <div id="div">adasfsfs</div> <div>adasfs ...

  9. vue2.0 通过v-html指令渲染的富文本无法修改样式的解决方案

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: 比如下面的代码,div.descBox里面的p标签的color样式并不是"color: blue" ...

随机推荐

  1. 51单片机下实现软件模拟IIC通信

    1.IIC协议简易概述 IIC全称Inter-Integrated Circuit (集成电路总线),是由PHILIPS公司在80年代开发的两线式串行总线,用于连接微控制器及其外围设备.IIC属于半双 ...

  2. VScode开发STM32/GD32单片机-环境搭建

    1.软件下载 1.1.安装VSCode 1.2.下载安装VisualGDB 1.3.下载安装mingwin64 1.4.下载安装OpenOCD 1.5.下载GNU Arm Embedded Toolc ...

  3. day45-JDBC和连接池01

    JDBC和连接池01 1.JDBC概述 基本介绍 JDBC为访问不同的数据库提供了同一的接口,为使用者屏蔽了细节问题 Java程序员使用JDBC,可以连接任何提供了jdbc驱动程序的数据库系统,从而完 ...

  4. redis 分布式锁 PHP

    redis分布式 1.redis是单线程操作 2.分布式会出现的问题,死锁 3.redis分布式(集群).多台服务器里面都有多个单机redis.然后这些redis之间相互链接.还有查看各个单台服务器之 ...

  5. 如何使用python程序打包工具pyinstaller

    **通过**```pythonpyinstaller -F demo.py```**即可把demo.py打包成可独立运行的demo.exe** **pyinstaller在cmd使用格式:***pyi ...

  6. vue3渲染函数(h函数)的变化

    vue3 渲染函数(h函数)的更改 h函数的更改总结 1==>h 现在全局导入,而不是作为参数传递给渲染函数 2==>渲染函数参数更改为在有状态组件和函数组件之间更加一致 3==>v ...

  7. 九、kubernetes命令行工具kubectl

    为了方便在命令行下对集群.节点.pod进行管理,kubernetes官方提供了一个管理命令:kubectl kubectl作为客户端CLI工具,可以让用户通过命令行对Kubernetes集群进行操作. ...

  8. HTML躬行记(3)——WebRTC视频通话

    WebRTC 在创建点对点(P2P)的连接之前,会先通过信令服务器交换两端的 SDP 和 ICE Candidate,取两者的交集,决定最终的音视频参数.传输协议.NAT 打洞方式等信息. 在完成媒体 ...

  9. IDEA中Java项目创建lib目录并生成依赖

    首先介绍说明一下idea在创建普通的Java项目,是没有lib文件夹的,下面我来带大家来创建一下1.右键点击项目,创建一个普通的文件夹 2.取名为lib 3.把项目所需的jar包复制到lib文件夹下 ...

  10. 支持JDK19虚拟线程的web框架,之二:完整开发一个支持虚拟线程的quarkus应用

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本篇是<支持JDK19虚拟线程的web ...