如何仅使用 JavaScript 减少和增加滚动时的 div 高度？
[英]How do I decrease and increase height of div on scroll with JavaScript only?
问题描述
JavaScript 
JavaScript
var changeHeight = () => {
let flag = 0;
while(flag != 1) {
size += 1;
return size;
}
if(size == window.innerHeight/2){
flag == 1;
}
}
var size = 5;
document.body.style.height = "10000px";
const div = document.createElement("div");
div.style.width = "100%";
div.style.position = "fixed";
div.style.left = "0";
div.style.top = "0";
div.style.backgroundColor = "green";
document.body.appendChild(div);
window.addEventListener("scroll", changeHeight);
div.style.height = size + "px";
HTML HTML
It's empty with only <script src="script1.js"> </script> inside它是空的，里面只有<script src="script1.js"> </script>
What do I want to achieve?我想达到什么目标？
I want to create stick to the top of the page object while scrolling which increases height until height == window.innerHeight/2 after this, scrolling should decrease it's size.我想在滚动时创建坚持到页面顶部 object 增加高度直到height == window.innerHeight/2在此之后，滚动应该减小它的大小。
My problem is that I cannot return size variable over the function, or is there something more wrong?我的问题是我无法在 function 上返回大小变量，还是有更多错误？
2 个解决方案
解决方案1
1 已采纳 2021-11-23 09:33:52
while is unnecesery in this case and you don't have any code that will tell this element to decrease its size. while 在这种情况下是不必要的，并且您没有任何代码可以告诉该元素减小其大小。
In this example given element will decrease and increase its size back and forth在此示例中，给定元素将来回减小和增加其大小
let size = 5; let flag = 0; const step = 1; const changeHeight = () => { if(size >= window.innerHeight / 2 && flag === 0){ flag = 1; } else if (size <= 0 && flag === 1) { flag = 0; } div.style.height = `${flag? size-=step: size+=step}px`; } document.body.style.height = "10000px"; const div = document.createElement("div"); div.style.width = "100%"; div.style.position = "fixed"; div.style.left = "0"; div.style.top = "0"; div.style.backgroundColor = "green"; document.body.appendChild(div); window.addEventListener("scroll", changeHeight);
<html> <body> </body> </html>
解决方案2
0 2021-11-23 10:43:52
var size = 5;
var halfWay = false;
const changeHeight = () => {
console.log("size", size);
if (size <= window.innerHeight / 2 && !halfWay) halfWay = false;
else halfWay = true;
if (!halfWay) {
// If the height is less than or equal to the windows inner height increase the height of the div element.
size += 1;
return size;
}
else if (halfWay && size > 5) {
// If the height has come down to the halfway point of the windows inner height then decrease the height of the div element.
size -= 1;
return size;
}
else {
// Resets to original values
halfWay = false;
size = 5;
return size;
}
// Original code.
/* let flag = 0;
console.log("b4", size);
while (flag != 1) {
size += 1;
console.log("after", size);
return size;
}
if (size == window.innerHeight / 2) {
flag = 1;
}
*/
}
document.body.style.height = "10000px";
const div = document.createElement("div");
div.style.width = "100%";
div.style.position = "fixed";
div.style.left = "0";
div.style.top = "0";
div.style.backgroundColor = "green";
div.style.height = "5px";
document.body.appendChild(div);
console.log("Window innerHeight:", window.innerHeight);
window.addEventListener("scroll", () => {
div.style.height = changeHeight() + "px";
console.log("size in listner:", size);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.