当前项目使用vue3+vite搭建的
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + Vue + TS</title> <style> .progress { position: fixed; top: 0; height: 3px; background: orange; } </style> </head> <body> <div class="progress"></div> <div id="app"></div> <script type="module" src="/src/main.ts"></script> <script> (function () { let bodyHeight = document.documentElement.scrollHeight; //页面高度 let winHeight = document.body.clientHeight; //浏览器高度 let scroolHeight = bodyHeight - winHeight; //滚动高度 window.onscroll = function () { let scrollTop = document.documentElement.scrollTop; //获取滚动条 document.querySelector('.progress').style.width = (scrollTop / scroolHeight) * 100 + "%";//计算width } })() </script> </body> </html>
demo.vue
<template> <div class="box"> <p>1111111111111111111111111111</p> </div> </template> <script setup lang="ts"></script> <style scoped> p { font-size: 24px; height: 2000px; } </style>
