当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. Xorg+LXDE迁移到Xwayland(同时支持Waydroid和Wine)记录

    系统环境: Debian bullseye Display Manager:无 桌面环境:LXDE Xorg 为什么使用Xwayland Wayland+Xwayland可以很好的支持Wayland ...

  2. Pyhton实践项目之(一)五子棋人机对战

    1 """五子棋之人机对战""" 2 3 import random 4 import sys 5 6 import pygame 7 im ...

  3. PHP全栈开发(八):CSS Ⅶ 表格 style

    表格默认是没有边框的,因此,我们在设置表格格式的时候,首先要设置的是表格边框的样式,也就是 table{ border-style:solid; } 设置完表格表格的样式之后,可以设置表格边框的粗细程 ...

  4. C++编程范式(函数)

    1 // 2 // main.cpp 3 // test 4 // 5 // Created by Shaojun on 30/5/2020. 6 // Copyright 2020 Shaojun. ...

  5. Git、TortoiseGit中文安装教程,如何注册Gitee账号进行代码提交,上传代码后主页贡献度没显示绿点(详解)

    今天给大家分享的是 Git 软件和 TortoiseGit 图形化软件的详细安装教程以及如何在 gitee 上进行代码提交. 首先我也是个刚接触 gitee 的一个小白用户,这些都是自己一边学一边记录 ...

  6. 微信小程序——悬浮按钮

    关键:    position: fixed; wxml: <navigator url="/pages/issue/index"><image class='i ...

  7. Debian11管理员手册

    1 用户与群组数据库 用户清单通常保存在 /etc/passwd 文件内,把哈希编码后的密码保存在 /etc/shadow 文件内.这两个文件都是纯文本档,以简单的格式保存,可以用文本编辑器读取与修改 ...

  8. Python基础部分:2、 对计算机的认识和python解释器

    目录 一.计算机五大组成部分 1.控制器 2.运算器 3.储存器 4.输入设备 5.输出设备 二.计算机三大核心硬件 1.cpu 2.内存 3.硬盘 三.操作系统 四.编程与编程语言 1.编程语言 2 ...

  9. .NET性能优化-复用StringBuilder

    在之前的文章中,我们介绍了dotnet在字符串拼接时可以使用的一些性能优化技巧.比如: 为StringBuilder设置Buffer初始大小 使用ValueStringBuilder等等 不过这些都多 ...

  10. 谣言检测()《Rumor Detection with Self-supervised Learning on Texts and Social Graph》

    论文信息 论文标题:Rumor Detection with Self-supervised Learning on Texts and Social Graph论文作者:Yuan Gao, Xian ...