javascript - 如何根据javascript中的滚动位置动态更改div的高度?
问题描述
我正在尝试使用 javascript 根据滚动位置动态更改 div 的高度。现在 div 的高度确实发生了变化,但我看不到它。这是我的代码:
window.addEventListener('scroll', (e) => {
document.querySelector('div').style.height = window.scrollY + 'px'
})
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
height:3000px;
}
div{
width: 100%;
background: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Scroll Animation</title>
</head>
<body>
<div></div>
<script src="app.js"></script>
</body>
</html>
解决方案
我只想添加:window.scrollY*2
document.querySelector('div').style.height = window.scrollY + window.scrollY*2 + 'px'
推荐阅读
- ios - 为什么苹果在压缩之前对 .ipa 进行加密?
- python-3.x - 使用自定义输入训练 spacy 模型
- python - 如何限制线程池中线程的 nr 以实现无限迭代?
- assembly - 对 MIPS j 和 beq 指令使用十六进制值
- python-3.x - 如何覆盖 `TemplateView.as_view()` 并使用 ConfirmEmailView 进行电子邮件验证?
- html - 我的 svg 轮廓不完全在 svg 边缘
- java - 字符串的 charAt(0) 未返回预期值
- spring-boot - oauth2 资源服务器是否应该询问身份验证服务器上的 Userinfo 端点
- java - 无法在 Spring Tools 4 / Eclipse 中安装 org.eclipse.ajdt.ui.nature
- sql - 嵌套自联接并创建多个总和