我正在努力创建一个特殊的淡出动画，该动画仅在用户向上滚动div时才会发生（向下滚动时它有一个单独的动画，我不想改变它并且它发生在不同的时间，所以我不能只是切换课程）。
就 CSS 而言，我已经让动画正常工作，但我已经精简了代码以使触发器正常工作，因为这是我的最后一个障碍。当我进入中间 div 部分时（如控制台日志中所示），我可以触发，但打嗝似乎是我确定滚动方向的地方。
正如您在示例中看到的，如果您向上滚动到 div，控制台日志就会出现。但是，当我调用 handleScroll 函数并尝试记录滚动方向时，它没有显示任何内容。这是我剩下的最后一步，只是确定 div 输入时的滚动方向，然后如果用户确实向上滚动，只需检查他们是否通过 div 的 50%。
为什么这些触发因素没有发生？
document.addEventListener("DOMContentLoaded", function () {
const section = document.querySelector('.mountain-sect');
// Function to handle intersection changes
function handleIntersection(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Add scroll listener when entering the div
console.log('in section ');
section.addEventListener('scroll', handleScroll);
} else {
// Remove scroll listener when leaving the div
section.removeEventListener('scroll', handleScroll);
}
});
}
// Function to handle scroll event
function handleScroll(event) {
console.log('scrolling');
const target = event.target;
const scrollTop = target.scrollTop;
const scrollDirection = scrollTop > previousScrollTop ? 'down' : 'up';
const scrollHeight = target.scrollHeight;
const clientHeight = target.clientHeight;
const scrollPercentage = (scrollTop / (scrollHeight - clientHeight)) * 100;
console.log(scrollDirection);
if (scrollDirection === 'up' && scrollPercentage < 50) {
window.alert('You are more than 50% through the div while scrolling up.');
}
previousScrollTop = scrollTop;
}
// Create an Intersection Observer instance
const observer = new IntersectionObserver(handleIntersection);
// Observe the target element
observer.observe(section);
});<div class="container">
<div style="position: relative;"><img src="https://placehold.co/600x400" /></div>
<div class="mountain-sect" style="position: relative;"><img src="https://placehold.co/600x400" /></div>
<div style="position: relative;"><img src="https://placehold.co/600x400" /></div>
</div>要实现这一点，您需要检测滚动方向以及滚动相对于 div 的位置。以下是如何使用 JavaScript 实现此目的的基本示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Fade-out Animation</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.container {
height: 2000px; /* Just for demonstration */
overflow-y: scroll;
position: relative;
}
.content {
height: 1000px;
background-color: lightblue;
transition: opacity 0.5s ease;
}
.fade-out {
opacity: 0;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="content" id="content">
Scroll inside this div...
</div>
</div>
<script>
const container = document.getElementById('container');
const content = document.getElementById('content');
let lastScrollTop = 0;
container.addEventListener('scroll', function() {
const scrollTop = container.scrollTop;
if (scrollTop > lastScrollTop) {
// Scrolling down
content.classList.remove('fade-out');
} else {
// Scrolling up
content.classList.add('fade-out');
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
});
</script>
</body>
</html>