当前项目使用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>
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
