滚动条样式实现参考代码

Posted 2022-12-14 云舜言传

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动条样式实现参考代码相关的知识，希望对你有一定的参考价值。

前段时间项目中要使用滚动条，随机在网上找了一些资料，自己整合了一个滚动条样式的代码，共享大家彼此学习。

1、style.css

@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

/* Basic resets */

*  
	margin:0; padding:0; 
	box-sizing: border-box;


body 
margin: 50px auto 0;
max-width: 800px;

font-family: "Expletus Sans", sans-serif;


li 

	width: 50%;
	float: left;
	list-style-type: none;
	
	padding-right: 5.3333333%;


li:nth-child(even)  margin-bottom: 5em;

h2 
	margin: 0 0 1.5em;
	border-bottom: 1px solid #ccc;
	
	padding: 0 0 .25em;


/* Styling an indeterminate progress bar */

progress:not(value) 
	/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */


/* Styling the determinate progress element */

progress[value] 
	/* Get rid of the default appearance */
	appearance: none;
	
	/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
	border: none;
	
	/* Add dimensions */
	width: 100%; height: 20px;
	
	/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
	  background-color: whiteSmoke;
	  border-radius: 3px;
	  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
	
	/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
	color: royalblue;
	
	position: relative;
	margin: 0 0 1.5em; 


/*
Webkit browsers provide two pseudo classes that can be use to style html5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar 
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;


progress[value]::-webkit-progress-value 
	position: relative;
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Let's animate this */
	animation: animate-stripes 5s linear infinite;


@keyframes animate-stripes  100%  background-position: -100px 0;  

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after 
	/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
	content: '';
	position: absolute;
	
	width:5px; height:5px;
	top:7px; right:7px;
	
	background-color: white;
	border-radius: 100%;


/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar 
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);
	
	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;
	
	/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */


/* Fallback technique styles */
.progress-bar 
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

	/* Dimensions should be similar to the parent progress element. */
	width: 100%; height:20px;


.progress-bar span 
	background-color: royalblue;
	border-radius: 3px;
	
	display: block;
	text-indent: -9999px;


p[data-value]  
  
  position: relative; 


/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after 
	content: attr(data-value) '%';
	position: absolute; right:0;






.html5::-webkit-progress-value,
.python::-webkit-progress-value  
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #f44);


.css3::-webkit-progress-value,
.php::-webkit-progress-value 

	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #ff0);


.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value 

	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #690);


/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar 
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);


.css3::-moz-progress-bar,
.php::-moz-progress-bar 

	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #ff0);


.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar 
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #690);


/* Now we are good to duplicate html code for other skills and then add the css code for the new skill based on data-skill */

  
/* THE END */

2、prefixfree.min.js

/**
 * StyleFix 1.0.3 & PrefixFree 1.0.7
 * @author Lea Verou
 * MIT license
 */
(function()function t(e,t)return[].slice.call((t||document).querySelectorAll(e))if(!window.addEventListener)return;var e=window.StyleFix=link:function(t)tryif(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))returncatch(n)returnvar r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\\/]+$/,""),s=(/^[a-z]3,10:/.exec(i)||[""])[0],o=(/^[a-z]3,10:\\/\\/[^\\/]+/.exec(i)||[""])[0],u=/^([^?]*)\\??/.exec(r)[1],a=t.parentNode,f=new XMLHttpRequest,l;f.onreadystatechange=function()f.readyState===4&&l(),l=function()var n=f.responseText;if(n&&t.parentNode&&(!f.status||f.status<400||f.status>600))n=e.fix(n,!0,t);if(i)n=n.replace(/url\\(\\s*?((?:"|')?)(.+?)\\1\\s*?\\)/gi,function(e,t,n)return/^([a-z]3,10:|#)/i.test(n)?e:/^\\/\\//.test(n)?'url("'+s+n+'")':/^\\//.test(n)?'url("'+o+n+'")':/^\\?/.test(n)?'url("'+u+n+'")':'url("'+i+n+'")');var r=i.replace(/([\\\\\\^\\$*+[\\]?.=!:(|)])/g,"\\\\$1");n=n.replace(RegExp("\\\\b(behavior:\\\\s*?url\\\\('?\\"?)"+r,"gi"),"$1")var l=document.createElement("style");l.textContent=n,l.media=t.media,l.disabled=t.disabled,l.setAttribute("data-href",t.getAttribute("href")),a.insertBefore(l,t),a.removeChild(t),l.media=t.media;tryf.open("GET",r),f.send(null)catch(n)typeof XDomainRequest!="undefined"&&(f=new XDomainRequest,f.οnerrοr=f.οnprοgress=function(),f.οnlοad=l,f.open("GET",r),f.send(null))t.setAttribute("data-inprogress",""),styleElement:function(t)if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t),t.disabled=n,styleAttribute:function(t)var n=t.getAttribute("style");n=e.fix(n,!1,t),t.setAttribute("style",n),process:function()t("style").forEach(StyleFix.styleElement),t("[style]").forEach(StyleFix.styleAttribute),register:function(t,n)(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t),fix:function(t,n,r)for(var i=0;i<e.fixers.length;i++)t=e.fixers[i](t,n,r)||t;return t,camelCase:function(e)return e.replace(/-([a-z])/g,function(e,t)return t.toUpperCase()).replace("-",""),deCamelCase:function(e)return e.replace(/[A-Z]/g,function(e)return"-"+e.toLowerCase());(function()setTimeout(function(),10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1))())(),function(e)function t(e,t,r,i,s)e=n[e];if(e.length)var o=RegExp(t+"("+e.join("|")+")"+r,"gi");s=s.replace(o,i)return sif(!window.StyleFix||!window.getComputedStyle)return;var n=window.PrefixFree=prefixCSS:function(e,r,i)var s=n.prefix;n.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\\s|:|,)(repeating-)?linear-gradient\\(\\s*(-?\\d*\\.?\\d*)deg/ig,function(e,t,n,r)return t+(n||"")+"linear-gradient("+(90-r)+"deg")),e=t("functions","(\\\\s|:|,)","\\\\s*\\\\(","$1"+s+"$2(",e),e=t("keywords","(\\\\s|:)","(\\\\s|;|\\\\|$)","$1"+s+"$2$3",e),e=t("properties","(^|\\\\|\\\\s|;)","\\\\s*:","$1"+s+"$2:",e);if(n.properties.length)var o=RegExp("\\\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\\\b",":(.+?);",function(e)return e.replace(o,s+"$1"),e)return r&&(e=t("selectors","","\\\\b",n.prefixSelector,e),e=t("atrules","@","\\\\b","@"+s+"$1",e)),e=e.replace(RegExp("-"+s,"g"),"-"),e=e.replace(/-\\*-(?=[a-z]+)/gi,n.prefix),e,property:function(e)return(n.properties.indexOf(e)?n.prefix:"")+e,value:function(e,r)return e=t("functions","(^|\\\\s|,)","\\\\s*\\\\(","$1"+n.prefix+"$2(",e),e=t("keywords","(^|\\\\s)","(\\\\s|$)","$1"+n.prefix+"$2$3",e),e,prefixSelector:function(e)return e.replace(/^:1,2/,function(e)return e+n.prefix),prefixProperty:function(e,t)var r=n.prefix+e;return t?StyleFix.camelCase(r):r;(function()var e=,t=[],r=,i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n)if(n.charAt(0)==="-")t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3)r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s),u=function(e)return StyleFix.camelCase(e)in s;if(i.length>0)for(var a=0;a<i.length;a++)o(i[a]);else for(var f in i)o(StyleFix.deCamelCase(f));var l=uses:0;for(var c in e)var h=e[c];l.uses<h&&(l=prefix:c,uses:h)n.prefix="-"+l.prefix+"-",n.Prefix=StyleFix.camelCase(n.prefix),n.properties=[];for(var a=0;a<t.length;a++)var f=t[a];if(f.indexOf(n.prefix)===0)var p=f.slice(n.prefix.length);u(p)||n.properties.push(p)n.Prefix=="Ms"&&!("transform"in s)&&!("MsTransform"in s)&&"msTransform"in s&&n.properties.push("transform","transform-origin"),n.properties.sort())(),function()function i(e,t)return r[t]="",r[t]=e,!!r[t]var e="linear-gradient":property:"backgroundImage",params:"red, teal",calc:property:"width",params:"1px + 5%",element:property:"backgroundImage",params:"#foo","cross-fade":property:"backgroundImage",params:"url(a.png), url(b.png), 50%";e["repeating-linear-gradient"]=e["repeating-radial-gradient"]=e["radial-gradient"]=e["linear-gradient"];var t=initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","min-content":"width";n.functions=[],n.keywords=[];var r=document.createElement("div").style;for(var s in e)var o=e[s],u=o.property,a=s+"("+o.params+")";!i(a,u)&&i(n.prefix+a,u)&&n.functions.push(s)for(var f in t)var u=t[f];!i(f,u)&&i(n.prefix+f,u)&&n.keywords.push(f)(),function()function s(e)return i.textContent=e+"",!!i.sheet.cssRules.lengthvar t=":read-only":null,":read-write":null,":any-link":null,"::selection":null,r=keyframes:"name",viewport:null,document:'regexp(".")';n.selectors=[],n.atrules=[];var i=e.appendChild(document.createElement("style"));for(var o in t)var u=o+(t[o]?"("+t[o]+")":"");!s(u)&&s(n.prefixSelector(u))&&n.selectors.push(o)for(var a in r)var u=a+" "+(r[a]||"");!s("@"+u)&&s("@"+n.prefix+u)&&n.atrules.push(a)e.removeChild(i)(),n.valueProperties=["transition","transition-property"],e.className+=" "+n.prefix,StyleFix.register(n.prefixCSS)(document.documentElement);

3、index.html

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>HTML5+CSS3多彩进度条 - 站长素材</title>

    <style>
@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

/* Basic resets */

*  
	margin:0; padding:0; 
	box-sizing: border-box;


body 
margin: 50px auto 0;
max-width: 800px;

font-family: "Expletus Sans", sans-serif;


li 

	width: 50%;
	float: left;
	list-style-type: none;

	padding-right: 5.3333333%;


li:nth-child(even)  margin-bottom: 5em;

h2 
	margin: 0 0 1.5em;
	border-bottom: 1px solid #ccc;

	padding: 0 0 .25em;


/* Styling an indeterminate progress bar */

progress:not(value) 
	/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */


/* Styling the determinate progress element */

progress[value] 
	/* Get rid of the default appearance */
	appearance: none;

	/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
	border: none;

	/* Add dimensions */
	width: 100%; height: 20px;

	/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
	  background-color: whiteSmoke;
	  border-radius: 3px;
	  box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

	/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
	color: royalblue;

	position: relative;
	margin: 0 0 1.5em; 


/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

progress[value]::-webkit-progress-bar 
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;


progress[value]::-webkit-progress-value 
	position: relative;

	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;

	/* Let's animate this */
	animation: animate-stripes 5s linear infinite;


@keyframes animate-stripes  100%  background-position: -100px 0;  

/* Let's spice up things little bit by using pseudo elements. */

progress[value]::-webkit-progress-value:after 
	/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
	content: '';
	position: absolute;

	width:5px; height:5px;
	top:7px; right:7px;

	background-color: white;
	border-radius: 100%;


/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */

progress[value]::-moz-progress-bar 
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);

	background-size: 35px 20px, 100% 100%, 100% 100%;
	border-radius:3px;

	/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */


/* Fallback technique styles */
.progress-bar 
	background-color: whiteSmoke;
	border-radius: 3px;
	box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;

	/* Dimensions should be similar to the parent progress element. */
	width: 100%; height:20px;


.progress-bar span 
	background-color: royalblue;
	border-radius: 3px;

	display: block;
	text-indent: -9999px;


p[data-value]  

  position: relative; 


/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */

p[data-value]:after 
	content: attr(data-value) '%';
	position: absolute; right:0;


.html5::-webkit-progress-value,
.python::-webkit-progress-value  
	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #f44);


.css3::-webkit-progress-value,
.php::-webkit-progress-value 

	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #ff0);


.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value 

	/* Gradient background with Stripes */
	background-image:
	-webkit-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -webkit-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -webkit-linear-gradient( left, #09c, #690);


/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */

.html5::-moz-progress-bar,
.php::-moz-progress-bar 
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #f44);


.css3::-moz-progress-bar,
.php::-moz-progress-bar 

	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #ff0);


.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar 
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
													 transparent,
													 transparent 33%,
													 rgba(0,0,0,.1) 33%,
													 rgba(0,0,0,.1) 66%,
													 transparent 66%),
    -moz-linear-gradient( top,
														rgba(255, 255, 255, .25),
														rgba(0,0,0,.2)),
     -moz-linear-gradient( left, #09c, #690);


/* Now we are good to duplicate html code for other skills and then add the css code for the new skill based on data-skill */

/* THE END */
</style>

    <script src="js/prefixfree.min.js"></script>

</head>

<body>

  <!--
Lets start with a single html5 progress element. Currently our progress bar is in the indeterminate state. Lets change the status by adding 'max' and 'value' attribute to our progress element.

We are almost done styling a single progress bar, except adding fallback technique for browsers that do not support progress element. The idea is to simulate the visual styles of the progress bar using `div` and `span`.

Note:- To imitate the older browsers and help us style the fallback technique, we wil temporarily comment-out the progress tag.
-->

<ul>
	<li>
		<h2>Frontend</h2>

		<!-- HTML5 -->
    <p style="width:80%" data-value="80">HTML5</p>
		<progress max="100" value="80" class="html5">
			<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
			<div class="progress-bar">
				<span style="width: 80%">80%</span>
			</div>
		</progress>

		<!-- CSS3 -->
    <p style="width:60%" data-value="60">CSS3</p>
		<progress max="100" value="60" class="css3">
			<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
			<div class="progress-bar">
				<span style="width: 60%">60%</span>
			</div>
		</progress>

		<!-- jQuery -->
    <p style="width:50%" data-value="50">jQuery</p>
		<progress max="100" value="50" class="jquery">
			<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
			<div class="progress-bar">
				<span style="width: 50%">50%</span>
			</div>
		</progress>

	</li>
	<li>
		<h2>Backend</h2>

    <!-- Python -->
    <p style="width:75%" data-value="75">Python</p>
		<progress max="100" value="75" class="python">
			<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
			<div class="progress-bar">
				<span style="width: 75%">75%</span>
			</div>
		</progress>

		<!-- PHP -->
    <p style="width:65%" data-value="65">PHP</p>
		<progress max="100" value="65" class="php">
			<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
			<div class="progress-bar">
				<span style="width: 65%">65%</span>
			</div>
		</progress>

		<!-- Node.js -->
    <p style="width:35%" data-value="35">Node.js</p>
    <progress max="100" value="35" class="node-js">
			<!-- Browsers that support HTML5 progress element will ignore the html inside `progress` element. Whereas older browsers will ignore the `progress` element and instead render the html inside it. -->
			<div class="progress-bar">
				<span style="width: 35%">35%</span>
			</div>
		</progress>		

	</li>
</ul>



</body>
</html>

4、效果实例

以上是关于滚动条样式实现参考代码的主要内容，如果未能解决你的问题，请参考以下文章

有两个div，一个父级，一个子级，父级有滚动条，样式如何写才能让子级的div固定在顶部，不随滚动条

css代码怎样改变火狐浏览器中滚动条样式

如何通过css更改滚动条样式

WPF ScrollViewer 滚动条问题

如何设置滚动条的样式?