一款漂亮的滚动条

惧愁人

2024/02/23 10:25:52

1 路径找到 /template/你的模板/common/header.html

在找到这段代码：<font color="#708090"><body id="nv_{$_G[basescript]}" class="pg_{CURMODULE}{if $_G['basescript'] === 'portal' && CURMODULE === 'list' && !empty($cat)} {$cat['bodycss']}{/if}" onkeydown="if(event.keyCode==27) return false;"> <div id="append_parent"></div><div id="ajaxwaitid"></div></font>

把下面代码添加到上<body> 之间 </body>

2 路径找到 /template/你的模板/common/footer.html

添加到里面 footer.html 里面

<script type="text/javascript"> let progress=document.getElementById('progressbar'); let totalheight=document.body.scrollHeight - window.innerHeight; window.onscroll=function(){ let progressHeight=(window.pageYOffset / totalheight) *100; progress.style.height=progressHeight + "%"; }</script>

3 路径找到 /template/你的模板/common/common.css

添加到 common.css 最下面

*{ -margin: 0; -padding: 0; -box-sizing: border-box; font-family: "Droid Serif","Times New Roman","PingFang SC","Hiragino Sans GB","Source Han Sans CN","WenQuanYi Micro Hei","Microsoft Yahei",serif;}section{ -padding: 50px; -background: #000; -min-height: 100vh;}section h2{ font-size: 2.5em; color: #fff;}section p{ font-size: 1.2em; color: #fff;}::-webkit-scrollbar{ width: 0;}#scrollpath{ position: fixed; top: 0; right: 0; width: 10px; height: 100%; background: rgba(255,255,255,0.05);}#progressbar{ position: fixed; top: 0; right: 0; width: 10px; background: linear-gradient(to top,#008aff,#00ffe7); animation: animate 5s linear infinite;}@keyframes animate{ 0%,100%{ filter:hue-rotate(0deg); } 50%{ filter:hue-rotate(360deg); }}#progressbar:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top,#008aff,#00ffe7); filter: blur(10px);}#progressbar:after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top,#008aff,#00ffe7); filter: blur(30px);}

演示地址: https://mp3.wf

进入原文参与互动

一款漂亮的 滚动条