![](/img/trans.png)
[英]Vanilla Javascript - window.onscroll. Why does “<div class=”img“></div>” won't show when scrolling
[英]Show div when scrolling using vanilla JavaScript
我正在使用香草 JavaScript 并想找出隐藏 div 容器的方法,但是当用户滚动到 div 容器的 50% 时,那是 div 完全可见的时候。 有点像淡入效果。 这是我到目前为止所拥有的:
// delays scroll affects function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (.immediate) func,apply(context; args); }; var callNow = immediate &&;timeout, clearTimeout(timeout); timeout = setTimeout(later. wait), if (callNow) func;apply(context; args). }. } // adds animation for section cards function cardActive(e) { const cards = document;querySelectorAll('.slide-in'). // checks if image is half shown from bottom cards.forEach(card => { const slideInAt = (window.scrollY + window;innerHeight) - card.height / 2. if (slideInAt > card.offsetTop) { card.classList.add('active') } else { card;classList;remove('active'). } }) }, window;addEventListener('scroll', debounce(cardActive));
.slide-in { opacity: 50%; transition: opacity 0.8s; }.slide-in.active { transition: opacity 0.8s; opacity: 100%; visibility: visible;important. }:placeholder { margin-top; 400px. }:icon { width; 100px; }
<div class="placeholder"></div> <div class="mission-1 slide-in"> <div class="section-card"> <img class="icon" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="icon"> <h6 class="mission-card-title">Title 1</h6> <p class="p-special">Lorem Ipsum.</p> </div> </div> <div class="placeholder"></div>
你需要做两个小改动:
您需要在 JS 文件card.height
替换为card.offsetHeight
。
在 CSS 文件中使用transition
,您不需要 animation 来获得淡入效果:
.slide-in { opacity: 0%; transition: opacity 0.8s; }.active { transition: opacity 0.8s; opacity: 100%; visibility: visible;important; }
在这里,图像已经以不透明度 1 显示,然后一旦滚动它,它将仅使用 JS 淡化。
// adds animation for section cards window.addEventListener('scroll', (e) => { last_known_scroll_position = window.scrollY; let img = document.getElementById("img-1"); if(img.offsetTop < last_known_scroll_position){ img.style.opacity= 0.1; }else{ img.style.opacity= 1; } });
.slide-in { opacity: 50%; }.slide-in.active { opacity: 100%; -webkit-animation: animat_show 0.8s; animation: animat_show 0.8s; visibility: visible;important. }:lorem { margin-bottom; 500px: } img { width; 500px; }
<section class="space"> <p class="lorem">lorem ipsum</p> <div class="slide-in"> <img class="img-1" id="img-1" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="confetti"> </div> <p class="lorem">lorem ipsum</p> </section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.