一款漂亮的滚动条 New

湖中沉 · 发表于 2024-2-23 11:27:24

您需要登录才可以下载或查看，没有账号？立即注册

x

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

dashen · 发表于 2024-2-23 11:28:07

效果很炫酷，谢谢分享，不过不适合应用于我的网站

免责声明