javascript - 页面的滚动百分比，我已经框架并编写了javascript，但它不起作用
问题描述
我有一个图片库，其中包含大量图片，我希望用户继续关注他看到了多少。为此，我在右上角创建了一个栏，其中包含表示文档已查看/滚动多少的百分比。我正在附上我所做的...我想要的最终输出是https:// ninjasfiles.s3.amazonaws.com/0000000000001881.gif
var scrolledBar = document.getElementById("scrolled");
// This function will return the maximum of the following
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.body.offsetHeight, D.body.clientHeight
);
}
var docHeight = getDocHeight();
var windowHeight = window.innerHeight;
window.onresize = function (e) {
docHeight = getDocHeight();
windowHeight = window.innerHeight;
};
// This function uses a for loop for individual progress bars. You can modify it so that it applies to the whole skill section at once
function setScrolled() {
var scrolled = Math.floor((window.scrollY/(docHeight-windowHeight))*100);
scrolledBar.innerText = scrolled;
}
document.addEventListener('scroll', function(){
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
document.getElementById('scroll').textContent = 'scrolled: ' + percent + '%';
});body {
font-family: sans-serif;
}
header {
position: fixed;
top: 1vw;
right: 1vw;
font-size: 1rem;
}
#progress-bar {
height: 30px;
width: 20vw;
background-color: transparent;
text-align: center;
color: #1b994d;
border-radius: 20px;
box-shadow: 0px 0px 20px grey, 0px 0px 5px green;
}
#progress-bar span {
line-height: 30px;
}
#scrolled {
font-size: 1.3rem;
}
#start {
padding: 11px;
width: 70%;
text-align: justify;
color: grey;
line-height: 28px;
font-size: 1.1rem;
margin: auto;
}
/* Portfolio Section */
#gallery h1 {
color: #2857a4;
margin-bottom: 74px;
text-transform: uppercase;
word-spacing: 1vw;
text-align: center;
font-size: 30px;
}
#gallery-container {
display: flex;
flex-wrap: wrap;
margin: 0 50px 100px;
justify-content: space-around;
}
.gallery-image-container {
max-width: 400px;
overflow: hidden;
margin: 30px;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.gallery-image-container img {
width: 100%;
height: 100%;
}
.gallery-image-container:hover {
box-shadow: 0 0 20px #74ADC8;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet"type="text/css"href="Percentage Scrolled.css">
</head>
<body>
<div id="scroll">
<header>
<div id="progress-bar">
<span><span id="scrolled">0</span>% Viewed</span>
</div>
</header>
<div id="start">
<p>
One of the basic thing about <span class="text-highlight">typesetting industry</span>. is the industry's standard <span class="text-highlight">dummy text ever</span> since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s <span class="text-highlight">with the release of Letraset</span> sheets containing Lorem Ipsum.
</p>
</div>
<section id="gallery">
<h1>Image Gallery</h1>
<div id="gallery-container">
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" />
</div>
</div>
</section>
</div>
<scipt type="text/javascript"src="Percentage Scrolled.js"></scipt>
</body>
</html><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet"type="text/css"href="Percentage Scrolled.css">
</head>
<body>
<div id="scroll">
<header>
<div id="progress-bar">
<span><span id="scrolled">0</span>% Viewed</span>
</div>
</header>
<div id="start">
<p>
One of the basic thing about <span class="text-highlight">typesetting industry</span>. is the industry's standard <span class="text-highlight">dummy text ever</span> since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s <span class="text-highlight">with the release of Letraset</span> sheets containing Lorem Ipsum.
</p>
</div>
<section id="gallery">
<h1>Image Gallery</h1>
<div id="gallery-container">
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png">
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" />
</div>
<div class="gallery-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" />
</div>
</div>
</section>
</div>
<scipt type="text/javascript"src="Percentage Scrolled.js"></scipt>
</body>
</html>解决方案
代替
document.getElementById('scroll').textContent = 'scrolled: ' + percent + '%';
// the `#scroll` element is a <div> containing all the content on the page
和
document.getElementById('scrolled').textContent = Math.floor(percent);
// the `#scrolled` element is the <span> containing the percentage
<script>您的 HTML 末尾的标记中还有一个印刷错误，并且src文件名中有一个空格，这是不允许的。
<scipt type="text/javascript"src="Percentage Scrolled.js"></scipt>
应更正为以下内容（并且您需要重命名 .js 文件以匹配）
<script type="text/javascript" src="Percentage-Scrolled.js"></script>
var scrolledBar = document.getElementById("scrolled");
// This function will return the maximum of the following
function getDocHeight() {
var D = document;
return Math.max(
D.body.scrollHeight, D.body.offsetHeight, D.body.clientHeight
);
}
var docHeight = getDocHeight();
var windowHeight = window.innerHeight;
window.onresize = function (e) {
docHeight = getDocHeight();
windowHeight = window.innerHeight;
};
// This function uses a for loop for individual progress bars. You can modify it so that it applies to the whole skill section at once
function setScrolled() {
var scrolled = Math.floor((window.scrollY / (docHeight - windowHeight)) * 100);
scrolledBar.innerText = scrolled;
}
document.addEventListener('scroll', function () {
var h = document.documentElement,
b = document.body,
st = 'scrollTop',
sh = 'scrollHeight';
var percent = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
document.getElementById('scrolled').textContent = Math.floor(percent);
});body { font-family: sans-serif; } header { position: fixed; top: 1vw; right: 1vw; font-size: 1rem; } #progress-bar { height: 30px; width: 20vw; background-color: transparent; text-align: center; color: #1b994d; border-radius: 20px; box-shadow: 0px 0px 20px grey, 0px 0px 5px green; } #progress-bar span { line-height: 30px; } #scrolled { font-size: 1.3rem; } #start { padding: 11px; width: 70%; text-align: justify; color: grey; line-height: 28px; font-size: 1.1rem; margin: auto; } /* Portfolio Section */ #gallery h1 { color: #2857a4; margin-bottom: 74px; text-transform: uppercase; word-spacing: 1vw; text-align: center; font-size: 30px; } #gallery-container { display: flex; flex-wrap: wrap; margin: 0 50px 100px; justify-content: space-around; } .gallery-image-container { max-width: 400px; overflow: hidden; margin: 30px; background-size: cover; background-repeat: no-repeat; position: relative; } .gallery-image-container img { width: 100%; height: 100%; } .gallery-image-container:hover { box-shadow: 0 0 20px #74ADC8; }<!DOCTYPE html> <html> <head> <title>Gallery</title> <link rel="stylesheet"type="text/css"href="Percentage Scrolled.css"> </head> <body> <div id="scroll"> <header> <div id="progress-bar"> <span><span id="scrolled">0</span>% Viewed</span> </div> </header> <div id="start"> <p> One of the basic thing about <span class="text-highlight">typesetting industry</span>. is the industry's standard <span class="text-highlight">dummy text ever</span> since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s <span class="text-highlight">with the release of Letraset</span> sheets containing Lorem Ipsum. </p> </div> <section id="gallery"> <h1>Image Gallery</h1> <div id="gallery-container"> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png"> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png"> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png"> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png"> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png"> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png"> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" /> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" /> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000025_1550237330_codezen_2.png" /> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" /> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" /> </div> <div class="gallery-image-container"> <img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000024_1550237299_codezen.png" /> </div> </div> </section> </div> <script type="text/javascript" src="Percentage-Scrolled.js"></script> </body> </html>推荐阅读
- python - Python（def）函数参数谁切换 IF NOT 或只是 IF 关键字
- python - 从 Spotify API 的 track 的 preview_url 获取 30 秒是如何定义的？
- python - 平滑线图：修复 interpolator1D y_axis 的 TypeError
- reactjs - 如何在 React 中渲染不稳定的父属性
- python-3.x - 使Integrate.quad 函数只返回解析值
- python - 如何使用python从一组点中选择等距离点
- javascript - 作为 React 组件的 Mapbox 示例
- mongodb - 猫鼬选择查询与其他集合的计数
- nuxt.js - 当页面刷新状态在nuxt js中为空时
- firebase-cloud-messaging - FCM 通过机器人框架获取注册令牌