CSS3 DIY浏览器滚动条样式

最新推荐文章于 2021-08-04 07:30:28 发布
最新推荐文章于 2021-08-04 07:30:28 发布
阅读量75 收藏
点赞数
原文链接：http://www.cnblogs.com/zwwill/p/7391401.html
版权

【效果】


【HTML代码】

<html> 
<head> 
<meta http-equiv="Content-Language" content="zh-cn"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>网页特效代码|JsCode.CN|---用CSS控制滚动条样式</title> 
<style> 
/*--IE--*/
body{
scrollbar-arrow-color: #000; /*三角箭头的颜色*/
scrollbar-face-color: #fff; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: #ccc; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: #fff; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: #000; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: #666; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: #999; /*立体滚动条背景颜色*/
scrollbar-base-color:#000; /*滚动条的基色*/
}

/*---滚动条默认显示样式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#ccc;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
} 
/*---鼠标点击滚动条显示样式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#aaa;  
}  
 
/*---滚动条大小--*/  
::-webkit-scrollbar{  
   width:8px;  
} 
 
/*---滚动框背景样式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}  

 
</style> 
</head> 
<body> 
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p>
<p>**</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
<p>　</p> 
</body> 
</html>


转载于:https://www.cnblogs.com/zwwill/p/7391401.html

weixin_30437337
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3改变浏览器滚动条样式
11-21
注：该方法只适用于 -webkit- 内核浏览器 浏览器滚动条太宽，太丑，影响日常开发怎么办，改TA 滚动条外观由2部分组成：1.滚动条整体滑轨 2.滚动条滑轨内滑块 在CSS中滚动条由3部分组成 name::-webkit-scrollbar //滚动条整体样式 name::-webkit-scrollbar-track //滚动条滑轨 name::-webkit-scrollbar-thumb //滚动条内部滑块 注：以上3个均为伪类，请将name更改为需要改变的元素名称 例如:改变整体页面的滚动条样式 body::-webkit-scrollbar{ //先改变body的滚动条宽度
CSS3自定义浏览器滚动条样式
F-Spider的博客
07-06 513
收集于互联网，整理后记录下来<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3自定义浏览器滚动条样式</title> <style> /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar {
diy滚动条（原生js）
weixin_41865901的博客
01-15 183
写这个主要是练习一下对“位置”的应用 就注意： 滑轮移动的距离/文字移动的距离=滑轮移动的最大距离/文字移动的最大距离 所以：文字移动的距离=滑轮移动的距离*文字移动的最大距离/滑轮移动的最大距离 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia
CSS3改变滚动条样式
jerny2017的博客
05-10 352
1、::-webkit-scrollbar 滑块的宽度，width是垂直方向的宽度，height是水平方向的宽度； 2、::-webkit-scrollbar-thumb 滑块部分的样式，宽高就不用设置了； 3、::-webkit-scrollbar-track 轨道部分的样式，宽高就不用设置了；只有webkit内核的浏览器支持此样式，pc端有兼容问题，移动端可以使用例子：&lt;div...
CSS3修改滚动条样式
salt_fash的博客
08-14 410
简介 ::-webkit-scrollbar是CSS的一个伪类选择器，可以修改了一个元素的滚动条的样式。但根据MDN官方文档的说明，::-webkit-scrollbar仅为草案，还没有成为标准，只有在webkit内核的浏览器中才能使用。 CSS滚动条选择器 你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式: ::-webkit-scrollbar — 整个滚动条. ::-web...
纯css修改浏览器scrollbar滚动条样式示例
09-22
本篇文章将详细介绍如何使用纯CSS修改浏览器的scrollbar滚动条样式。 首先，我们需要了解CSS中用于定义滚动条样式的伪元素选择器。主要有以下三个： 1. `::-webkit-scrollbar`：这个选择器用来设置整个滚动条的...
详解css3自定义滚动条样式写法
01-19
本文介绍了css3自定义滚动条样式写法，分享给大家，具体如下： 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。 ::-webkit-scrollbar-button ：滚动...
【CSS3】css3修改滚动条样式
LuviaWu的博客
09-18 251
1.滚动条组成　 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过...
css iframe 滚动,css – 如何设置iframe的滚动条样式？
weixin_39941847的博客
08-04 870
是否可以更改iframe滚动条的样式？我试图通过使用以下代码来设置它,但它似乎没有工作html{scrollbar-arrow-color: #252604;scrollbar-highlight-color: #BFC097;scrollbar-shadow-color: #ffffff;scrollbar-base-color : #000000;scrollbar-track-color: ...
自制的滚动条
qq_30327587的博客
04-13 306
// 简单的一个自制滚动条 function Scroll(options) { this.el_scroll = document.getElementsByClassName(options.scroll)[0] || document.getElementById(options.scroll); this.el_container = document.getElement...
CSS设置滚动条样式（兼容IE）
热门推荐
Rey
05-18 8万+
废话不多说，直接上demo，最下面有详细注释。 1、这是在webkit浏览器下显示的样式。 （个人比较喜欢简约点的） 2、在IE浏览器下显示的样式（为了区分所以样式写的不一样，我没找到IE下设置滚动条宽高的方法） 下面是代码： Lorem ipsum dolor sit amet, consectet
css iframe 滚动,如何改变iframe滚动条的样式？
weixin_34722760的博客
08-04 2310
通过css或者javascript都可以，能兼容不同浏览器。有什么方法吗？用公子介绍的插件malihu-custom-scrollbar-plugin(function($){$(window).load(function(){$(".myframe").mCustomScrollbar();});})(jQuery);会报错：Uncaught TypeError: Cannot read pro...
css 修改滚动条样式
子非渔
08-26 734
CSS3自定义滚动条样式 自定义滚动条实现 此部分针对webkit内核的浏览器，使用伪类来改变滚动条的默认样式，详情如下： 滚动条组成部分 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或向左向右移动） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）...
css3修改滚动条样式
muzidigbig的博客
11-07 1367
1.滚动条组成     ::-webkit-scrollbar 滚动条整体部分     ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）     ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）     ::-webkit-scrollbar-button 滚动条的...
转载-滚动条的CSS样式
沧海一粟
06-14 1219
IE下的滚动条样式 IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。 这些样式规则很简单： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/ scrollbar-3dlight-color: color;
scroll滚动条样式
cloudday的专栏
02-08 7929
http://www.dengjie.com/temp/scroller.swf IE下的滚动条样式 IE是最早提供滚动条的样式支持，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。 这些样式规则很简单： scrollbar-arrow-color: color; /*三角箭头的颜色*/ scrollbar-face-color: color; /*立体滚动条的颜色（包
CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)
SnowBeatRain的博客
08-07 5216
https://www.cnblogs.com/yclblog/p/6806496.html
css3滚动条样式怎么改
最新发布
04-12
你可以使用 CSS 的伪类选择器来改变滚动条的样式，例如： ``` /* 滚动条整体样式 */ ::-webkit-scrollbar { width: 8px; /* 滚动条宽度 */ height: 8px; /* 滚动条高度 */ } /* 滚动条轨道样式 */ ::-webkit-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值