CSS滚动条

如何自定义CSS滚动条的样式？

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条. 0.需求有的时候我们不想使用浏览器默认的滚动条样式,因为不够定制化和美观.那么如何自定义滚动条的样式呢?下面一起来看看吧. 1 基础知识 1.1 Webkit内核的css滚动条选择器 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式属性: ::-we…

CSS 滚动条宽度 All In One

CSS 滚动条宽度 All In One 滚动条宽度 IE 16px Chrome 12px scrollbar width bug 改变设计稿的宽度,没考虑到 scrollbar width solutions hidden scrollbar width IE 不支持 scrollbar-width: none; scrollbar-width: none; scrollbar-width: thin; scrollbar-width: auto; https://css-tricks.co…

× 目录 [1]条件 [2]默认 [3]尺寸[4]兼容[5]自定义前面的话滚动条在网页中经常见到,却并没有受到足够的重视.只有当因为滚动条的问题需要处理兼容性时,才进行调试操作.本文将就滚动条的常见内容进行梳理. 条件滚动条和overflow是紧密相关的.只有当父级的overflow的值是auto或scroll,并且元素的内容超出元素区域时,才有可能出现滚动条默认无论什么浏览器,默认滚动条均来自<html>,而不是<body>.因为<body>元素默认有8px…

CSS滚动条样式定制

效果图如下 <!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8&q…

css 滚动条样式

1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置以上三个属性设置的值为visible.scroll.hidden.auto visible 默认值.使用该值时,无论设置的"width"和"height" 的值是多少,其中的内容无论是否超出范围都将被强制显示. hidden 效果与visible相反.任何超出"width&q…

CSS滚动条样式设置

webkit浏览器css设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar-corner 边角 ::-webkit-resizer …

[CSS]滚动条样式设置

概述最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条,但是无法获取页面的实际高度,就放弃了,而是采用给页面的div加滚动条的方式. 滚动条css 在任何情况下,如果网页超出显示范围,就会出现滚动条.但有时我们并不想让它显示,如何隐藏它呢?只需在<body></body>之间插入代码: <body style="overf…

HTML+CSS 滚动条样式自定义 - 适用于 div,iframe, html 等

友言:这两天被滚动条整的无与伦比,在此做下总结: 首先自定义浏览器滚动条的实现原理:计算浏览器滚动条的高度,层级1的高度与滚动条的总高度是一样的,通过相似比例计算: 浏览器滚动条总高度 :滚动条高度 = 层级② :层级① => 关于实现自定义滚轮,首先要对整个布局进行了解: 1. 1.需要显示的层级和 2.需要被滚动层级的关系: 层级1 具有溢出隐藏属性,目的是为了隐藏层级2 多出的部分. 由于在层级1 的包裹之下层级2 溢出隐藏部分可以通过控制层级1 的 scrollTop 进…

DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏

<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>div滚动条在线演示 www.divcss5.com</title> <style> .divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00} .divcss5-b{…

css滚动条样式

1.横向滚动条:(abeamScroll) <div style="width:400px;height:200px;overflow-x:auto;overflow-y:hidden;"> <div style="width:600px;"> 的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶aaa </div> <div> 2.垂直滚动条:(verticalScroll) <…

CSS滚动条设置

/*IE滚动条颜色设置*/ body { scrollbar-arrow-color:#f2f2f3; /*上下箭头*/ scrollbar-track-color:#1589ce; /*底层背景色*/ scrollbar-face-color:#27aeff; /*滚动条前景色*/ scrollbar-Shadow-color:#1589ce; /*滚动条边线色*/ } /*chrome滚动条颜色设置*/ body::-webkit-scrollbar {width:10px; height:…

css滚动条样式自定义

很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; overflo…

css滚动条样式修改

.activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.activeMoreBankList::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 5px; -webkit-box…

css滚动条美化

/*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 5px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5…

CSS美化页面滚动条

文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器. 各种浏览器对CSS滚动条的支持情况这里说的Webkit浏览器包括谷歌浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器.这些浏览器加起来占有超过半数的桌面浏览器市场份额.对于…

css修改整个项目的滚动条样式

在项目中,滚动条不可避免的药出现.设置统一规范的滚动条也是必然.用一个独立的css文件即可修改整个项目中的滚动条样式 . scrollBar.css: /* 滚动条有滑块的轨道部分 */ ::-webkit-scrollbar-track-piece { background-color: #00000000; border-radius: 1px; } /* 整个滚动条 */ ::-webkit-scrollbar { width: 6px; height: 100%; } /* 滚动条竖向滑…

css 横向滚动条webkit-scrollbar

最近遇到一个横向滚动条的问题: 官网链接: https://developer.mozilla.org/zh-CN/docs/Web/CSS/::-webkit-scrollbar 这个 ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. CSS滚动条选择器Section 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动…

使用CSS隐藏元素滚动条

如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可.想要完全隐藏滚动条只需设置overflow:hidden即可,但是这样一来将导致元素内容不可滚动.时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现. Firefox浏览器对于Firefox,我们可以将滚动条宽度设置为none: scrollbar-width: none; /*…

CSS学习目录

前面的话 CSS是前端工程师的基本功,但好多执迷于学习javascript的人的基本功并不扎实.可能一些人从w3school网站匆匆过了一遍,只是对CSS常用概念有一些表面上的理解,就一头扎进javascript的深坑里跳不出来.实际上,javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题,而且性能还好. CSS之所以能成为一门优雅的语言,以及有其对应的重构工程师的岗位,是因为这本语言本身就有很强的存在价值,且真正要理解它并不容易.从CSS禅意花园开始,写CSS成为一种艺术…

超棒的自定义超酷滚动条jQuery插件 - Perfect Scrollbar

可能大家厌倦了千篇一律的页面滚动条,如果你希望能够设计出与众不同的页面UI设计的话,Perfect ScrollBar可能就是你寻找的解决方案. 这个滚动条来自于一个个人项目,一个简单但是非常棒的滚动条设计.当然这里也有其它的解决方案,如果你有兴趣也可以阅读: 使用jQuery插件jScrollPane开发Mac OSX Lion风格的滚动条一个仿Apple - OS X Lion操作系统风格的滚动条jQuery插件- lionbars 主要特性: 不需要修改任何的元素的css 滚动条不影响最…

chrome和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改,但chorme下的则可以任意修改,惊喜的是IE竟然是最早实现这一功能的浏览器,IE5都能有效果. chorme下的滚动条样式修改: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css&q…

自定义滚动条jQuery插件- Perfect Scrollbar

主要特性: 不需要修改任何的元素的css 滚动条不影响最初的页面布局设计滚动条支持完整的自定义滚动条的尺寸和位置会随着容器尺寸或者内容的变化而变化依赖于jQuery和相关几个类库不需要定义宽度和高度.它会固定在容器的右下你可以修改任何滚动条的样式,不依赖于其它脚本滚动条支持'update'方法.如果你需要修改滚动条的位置和大小,只需要调用这个方法即可不使用'scrollTop'和'scrollLeft',不是用任何绝对定位使用要求: 必须有一个内容元素容器必须拥有一个'posi…

DIV 自定义滚动条样式（二）

流浏览器自带的滚动条样式很丑,确实有必要美化. 滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深. 滚动条的css样式主要有三部分组成: ::-webkit-scrollbar 定义了滚动条整体的样式: ::-webkit-scrollbar-thumb 滑块部分: ::-webkit-scrollbar-thumb 轨道部分: 下面以overflow-y:auto;为例(overflow-x:auto同) html…

CSS-界面滚动时不显示滚动条

设置滚动条的样式: div::-webkit-scrollbar { width: ; } 关于::-webkit-scrollbar ::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. CSS滚动条选择器你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动…

CSS004. 自定义滚动条样式（webkit）

CSS /* 滚动条宽度 */ ::-webkit-scrollbar { width: 6px; } /* 轨道样式 */ ::-webkit-scrollbar-track { background-color: transparent; } /* 滑块样式 */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 12px; border-radius: 12px; background: rgba(0, 0, 0, .2); } /* 滑…

vue 滚动条样式设置

App.vue 文件下加入下面css // 滚动条宽度 ::-webkit-scrollbar{ width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); border-radius: 10px; background-color: #FFF; } /* 滑块 */ ::-webkit-scrollbar-thumb {…

CSS--滚动条设置；

CSS滚动条实现步骤及美化小技巧 1.overflow-y : 设置当对象的内容超过其指定高度时如何管理内容:overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容. 参数:visible:扩大面积以显示所有内容 auto:仅当内容超出限定值时添加滚动条 hidden:总是隐藏滚动条 scroll:总是显示滚动条 2.height : 设置滚动条的高度(修改其后数值即可). 3.滚动条颜色参数设置: scrollbar-3d-light-color 设置或检索滚动条亮边框颜色 s…

jQuery插件综合应用(三)发布文章页面

一.使用的插件一个折叠的功能导航,由Akordeon插件实现.Nanoscroller插件与Tagit插件主要用于美化页面.这里只是测试,其实还可以综合使用其它的插件,例如将Akordeon插件换成菜单插件,而且也可以使用jquery ui,之所以没有使用jquery ui,是因为修改jquery ui 的style对我来说比较复杂,所以没用.还有用户添加分类信息时如果需要弹出一个层,可以使用Lightbox_me插件实现.如用户输入的内容比较多,浏览器可能会有滚动条显示,我们可以使用scro…

winform实现QQ聊天气泡200行代码

c# winform实现QQ聊天气泡界面,原理非常简单,通过webKitBrowser(第三方浏览器控件,因为自带的兼容性差)加载html代码实现,聊天界面是一个纯HTML的代码,与QQ的聊天界面可以比拟,很不错,因为是html所以扩展性非常大,点击发送按钮可以将文本框的文字加入聊天里,项目开发过程遇到几个难点都解决了,如: 1.怎么在聊天新消息插入后将滚动条滚动到最底部,这里我网上搜索了webKitBrowser的滚动条用法找不到,所以这里我用了锚点链接通过每次加载html用js跳到锚点实现滚…

vue使用原生js实现滚动页面跟踪导航高亮

需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置,如果当前滚动的区域位置大于元素的位置,导航添加class,其他去掉class进行样式切换. 我使用的方法是在定位元素上添加id,在导航添加 html结构 main.vue <template> <div class="qz-home"> <div class…

【CSS滚动条】的更多相关文章