当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. MySQL实战,SQL语句

    student数据库 student学生表,course课程表表,sc成绩表 -- 1.找出成绩为95分的学生的姓名 SELECT Sname FROM student WHERE Sno IN( S ...

  2. MyBatis的各种查询功能

    1.查询一个实体类对象 /** * 根据用户id查询用户信息 * @param id * @return */ User getUserById(@Param("id") int ...

  3. 在mybatis中#{}和${}的区别

    文章目录 1.第一个#{} 2.第二个${} 3.区别 1.第一个#{} 解释: 使用#{}格式的语法在mybatis中使用preparement语句来安全的设置值 PreparedStatement ...

  4. 盘它!基于CANN的辅助驾驶AI实战案例,轻松搞定车辆检测和车距计算!

    摘要:基于昇腾AI异构计算架构CANN(Compute Architecture for Neural Networks)的简易版辅助驾驶AI应用,具备车辆检测.车距计算等基本功能,作为辅助驾驶入门级 ...

  5. 1.-Django项目结构

    一.Django简介 Django是一个开放源代码的Web应用框架,由Python写成.采用了MTV的框架模式,即模型M,视图V和模版T.   Django基本组件: 1.基本配置文件/路由系统 2. ...

  6. shell实践

    shell实践 父子shell 父shell:我们在登录某个虚拟机控制器终端的时候(连接某一个linux虚拟机)时,默认启动的交互式shell,然后等待命令输入. ps命令参数,是否有横杠的参数作用是 ...

  7. 打地鼠(susliks) 方法记录

    [SDOI2011]打地鼠 题目描述 2020.4.29 数据更新. 打地鼠是这样的一个游戏:地面上有一些地鼠洞,地鼠们会不时从洞里探出头来很短时间后又缩回洞中.玩家的目标是在地鼠伸出头时,用锤子砸其 ...

  8. Oracle数据库允许最大连接数

    1.查看当前的数据库连接数 SQL> select count(*) from v$process ; 2.数据库允许的最大连接数 SQL> select value from v$par ...

  9. onps栈使用说明(1)——API接口手册

    1. 底层API 由协议栈底层提供的api,用于涉及底层操作的一些功能实现,这些api接口函数的原型定义分布于不同的文件,它们被统一include进了onps.h中: open_npstack_loa ...

  10. 详解从浏览器地址栏输入URL到页面显示的步骤

    版本1(基础版本) 步骤1:浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求: 步骤2:服务器交给后台处理完成后返回数据,浏览器接收⽂件( HTML.JS.CSS ...