時間：2023-10-06 18:06:01 | 來源：網(wǎng)站運營
時間：2023-10-06 18:06:01 來源：網(wǎng)站運營
CSS+HTML<頁面滾動條進度效果>：
在線咨詢
CSSStyleDeclaration.setProperty(propertyName, value, priority) var(--scroll)是基于css的樣式變量，此篇文章通過修改全局的 --scroll的變量實現(xiàn)的樣式效果 var root = document.body.style;root.setProperty('--scroll', percent);技多不壓身，多學(xué)點新的才能有所進步~~~ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { width: 100%; margin: 0; display: flex; justify-content: center; align-items: center; } .box { width: 400px; height: 100px; position: fixed; box-shadow: 0 0 5px #ccc; top: calc(50% - 50px); left: calc(50% - 200px); display: flex; justify-content: center; align-items: center; } .text { position: relative; z-index: 5; font-size: 30px; color: white; font-weight: bold; text-shadow: 2px 2px 5px rgb(70, 70, 70); } .progress { width: calc(var(--scroll)*1%); height: 100%; display: block; background: rgb(96, 207, 44); position: absolute; left: 0; top: 0; } </style></head><body> <div class="box"> <div class="progress"> </div> <span class="text">0</span> </div> <div style="width:1px;height:2000px;"></div></body><script> document.addEventListener('DOMContentLoaded', function () { var root = document.body.style; var text = document.querySelector('.text') window.addEventListener('scroll', scroll); function scroll() { //滾動條距離頂部高度 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; //window.innerHeight 窗口的可視高度 //document.body.offsetHeight body的高度及內(nèi)容的高度 //滾動條進度百分比 var percent = scrollTop / (document.body.offsetHeight - window.innerHeight) * 100 root.setProperty('--scroll', percent); text.innerHTML = percent.toFixed(0) + '%' } });</script></html>關(guān)鍵詞：進度,效果,滾動
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
