一款漂亮的滚动条

惧愁人 · 发表于 2024-2-23 10:25:52

马上注册，免费下载更多dz插件网资源。

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

×

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>

<div id="progressbar"></div><div id="scrollpath"></div>

复制代码

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

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！