因此页面没有滚动属性。div中包含具有滚动属性的元素。我正在寻找一个等价于div的pageYOffset，以了解其滚动长度。
const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");
parent.addEventListener("scroll", () => {
console.log(pageYOffset); //I need to change this
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
overflow: hidden;
}
.container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.childern {
height: 100vh;
scroll-snap-align: start;
}
.one {
background-color: black;
}
.two {
background-color: rgb(36, 36, 36);
}
.three {
background-color: rgb(71, 71, 71);
}<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="childern one"></div>
<div class="childern two"></div>
<div class="childern three"></div>
</div>
</body>
<script src="app.js"></script>
</html>parent.scrollTop就是您所需要的。
如果您想知道元素的滚动长度，只需使用scrollHeight即可。如果您想查看元素滚动了多远，可以使用scrollTop。
像这样：
const scrollable = document.querySelector('.scrollable')
// This should print 500, which is the same height as the child div
// "content".
console.log(scrollable.scrollHeight)
scrollable.addEventListener("scroll", e => {
// This shows how far down in the element we've scrolled.
console.log(scrollable.scrollTop)
}).scrollable {
width: 200px;
height: 200px;
overflow-y: scroll;
}
.content {
width: 100%;
height: 500px;
background-color: lightblue;
}<div class="scrollable">
<div class="content"></div>
</div>这是有效的，请检查一下。
const childern = document.querySelectorAll(".childern");
const parent = document.querySelector(".container");
parent.addEventListener("scroll", () => {
console.log(parent.scrollTop); //I need to change this
});* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
overflow: hidden;
}
.container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.childern {
height: 100vh;
scroll-snap-align: start;
}
.one {
background-color: black;
}
.two {
background-color: rgb(36, 36, 36);
}
.three {
background-color: rgb(71, 71, 71);
}<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="childern one"></div>
<div class="childern two"></div>
<div class="childern three"></div>
</div>
</body>
<script src="app.js"></script>
</html>