滚动条

刚给div加了滚动条，发现默认的样式很难看，所以想美化一下，搜了一下找到一个还不错，就记录下来 content是div的class名，也可以不加，就是全局样式 .content::-webkit-scrollbar { //滚动条整体样式 width : 10px ; height : 10px ; } .content::-webkit-scrollbar-thumb { //滚动条小方块样式 border-radius : 10px ; -webkit-box-shadow : inset 0 0 5px rgba ( 0,0,0,0.2 ) ; background : #B5BECB ; } .content::-webkit-scrollbar-track { //滚动条滚动轴样式 border-radius : 10px ; -webkit-box-shadow : inset 0 0 5px rgba ( 0,0,0,0.2 ) ; background : #EDEDED ; } 效果图： 如果要隐藏横向滚动条，可以加入这段代码 .content { height : 500px ; box-shadow : 0 2px 4px rgba ( 0, 0, 0, .12 ) , 0 0 6px rgba ( 0, 0, 0, .04 ) ; /*overflow

很惭愧，写css写了好几年，竟然今天才知道不用自己写滚动条，不用写任何的js，直接改变默认的滚动条样式就能实现想要的效果！今天就来说一说 CSS3自定义滚动条样式 -webkit-scrollbar 当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。 首先我们要了解滚动条。滚动条从外观来看是由两部分组成： 可以滑动的部分，我们叫它滑块 滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分组成： ::-webkit-scrollbar 定义了滚动条整体的样式； ::-webkit-scrollbar-thumb 滑块部分； ::-webkit-scrollbar-track 轨道部分； 写过后台管理系统的同学们应该会遇到一个布局，上-左右，左边的导航栏有时候会超出屏幕高度出现滚动条，如果显示默认的滚动条就显得太丑了！曾经见过比较好的做法是，鼠标滑到滚动条部分的时候，滚动条（修改过后的能看的）会显示，离开的时候会隐藏，我简单模仿了下 < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < title > < / title > < style type = "text/css" > * {

因为在模拟开发冒险岛2游戏官网的时候,遇到一个关于滚动条样式设置的问题,如果我们不设置滚动条的样式,那么如下图所示:(特别丑陋) 但是在冒险岛的官网上呈现的样式却是: 明显感觉到视觉上的不同,那么现在我们就来设置滚动条的样式: 在所有浏览器，滚动条可定制性最强的当属webkit内核的浏览器了。因为源代码开放的原因，市面上基于webkit内核的浏览器也是很难穷举完。例如有：Google Chrome、Opera（opera最近宣布使用webkit内核了）、360极速浏览器，猎豹浏览器等，搜狗浏览器······ 下面我们来看一下webkit浏览器是如何强大的吧！首先来了解它的属性: 滚动条的设置 1 . : :-webkit-scrollbar 滚动条整体部分，可以设置宽度等 2 . : :-webkit-scrollbar-button 滚动条两端的按钮 3 . : :-webkit-scrollbar-track 外层轨道 4 . : :-webkit-scrollbar-track-piece 内层滚动槽 5 . : :-webkit-scrollbar-thumb 滚动的滑块 6 . : :-webkit-scrollbar-corner 边角 7 . : :-webkit-resizer 定义右下角拖动块的样式 ::-webkit-scrollbar ：滚动条整体部分

默认滚动条样式如下： 那如何修改呢？如下代码： <div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</p> </div> </div> .inner{ width: 265px; height: 400px; position: absolute; top: 33px; left: 13px; overflow:hidden; } .innerbox{ overflow-x: hidden; overflow-y: auto; color: #000; font-size: .7rem; font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma; height: 100%; } /*滚动条样式*/ .innerbox::-webkit-scrollbar { width: 4px; /*height: 4px;*/ } .innerbox::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba

<!--修改 滚动条 下面 的 宽度--> .test { height : 100px ; overflow : auto ; } .test::-webkit-scrollbar { width : 15px ; } <!--修改 滚动条的 下面 的 样式--> .test::-webkit-scrollbar-track { background-color : red ; -webkit-border-radius : 2em ; -moz-border-radius : 2em ; border-radius : 2em ; } <!--修改 滑块 --> .test::-webkit-scrollbar-thumb { background-color : #191919 ; -webkit-border-radius : 2em ; -moz-border-radius : 2em ; border-radius : 2em ; } 具体，可以看下图 ::-webkit-scrollbar 就是 那个 红色的 宽度 ::-webkit-scrollbar-track 就是那个 红色 的 样式 ::-webkit-scrollbar-thumb 就是那个 黑色的滑块 MDN的这篇比较详细 来源： CSDN 作者： kangkang_95 链接： https://blog

CSS3自定义滚动条样式 自定义滚动条实现 此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分 ::-webkit-scrollbar-corner 边角，即垂直滚动条和水平滚动条相交的地方 ::-webkit-resizer 两个滚动条的交汇处上用于拖动调整元素大小的小控件 滚动条组成结构图如下： 其他设置项： :horizontal //horizontal伪类适用于任何水平方向上的滚动条 :vertical //vertical伪类适用于任何垂直方向的滚动条 :decrement //decrement伪类适用于按钮和轨道碎片。表示递减的按钮或轨道碎片，例如可以使区域向上或者向右移动的区域和按钮 :increment //increment伪类适用于按钮和轨道碎片。表示递增的按钮或轨道碎片

body::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353; } body::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; } 效果： 来源： https://www.cnblogs.com/webcyh/p/11349295.html

每当我们设置一个overflow: hidden; 内容超过了固定高度或者宽度，就会出现滚动条；而在每个浏览器的滚动条显示不一样，而且样式不够有特色性，这就需要我们来自定了。 overflow可设置的属性： overflow:visible //默认值。内容不会被修剪，超出内容会显示在元素框之外 overflow:hidden //内容会被修剪。超出内容被隐藏 overflow:scroll //内容会被修剪，浏览器会显示滚动条以便查看其余内容 overflow: auto //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 overflow:inherit //规定从该父元素继承overflow属性的值 其中overflow-x和overflow-y可设置水平和垂直的滚动 滚动条构成如图所示： 控制这中默认样式，需要使用伪类改变样式： 1. ::-webkit-scrollbar 横竖滚动条整体部分 2. ::-webkit-scrollbar-thumb 滚动条里面的小方块 3. ::-webkit-scrollbar-track 滚动条的轨道 4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，可调整小方块的位置。 5. ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分 6. ::-webkit

预习了CSS3部分的新知识，想着在不使用JS的情况下实现导航栏滚动条效果，如下： 实现滚动条效果，其实就是在<li></li>标签中让<span>元素的宽度由0变化到100%，代码很简单，如下所示： CSS样式部分： <style> ul.nav{background-color: whitesmoke;} ul.nav li{padding: 10px 0;margin: 0 30px;overflow: hidden;} ul.nav li a{text-decoration: none;} ul.nav li span{position: relative;left: -5%;float: left;width: 5%;transition: border,width .5s;border:1px solid #5FB878;} ul.nav li:hover span{width: 105%;border:1px solid #5FB878;} </style> HTML部分： <div class="container"> <h2>Hello World!</h2> <div> <ul class="nav"> <li><a href="">导航一</a><span></span></li>　　　　　　　<li><a href="">导航二</a><span></span

在做UI自动化项目的时候，我们不免会遇到一些页面的内容比较多，导致会有滚动条，但是我们又主要操作当前页面看不到的元素，这怎么办呢？ 在我们实际操作过程中，我们肯定是直接滑动鼠标操作就可以完成，但是在做自动化的时候，我们怎么办呢？ 今天总结下用js代码来实现滚动条的操作 在selenium中是使用execute_script方法去执行js语句来实现滚动操作的 语句：execute_script("arguments[0].scrollIntoView();", target) 其中这个target就是通过定位元素找到的元素对象 所以滚动的步骤是： 　　1、通过selenium找到我们需要的元素 　　2、通过执行js语句，将元素滚动到可见区域 举个栗子： 　　 在我的博客首页中滑动到下一页 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys dr = webdriver.Chrome()dr.get("https://www.cnblogs.com/LCboss/")dr.implicitly_wait(3)# dr.find_element(By.ID, "kw").send_keys("腾讯