使用JavaScript滚动显示Div

Question

我试图在用户滚动页面时显示div。我尝试在没有任何额外库的情况下使用javascript和css来实现这一点。

目前，我有一个使用jQuery的设置，可以完成任务，但我在寻找仅限javascript的解决方案时遇到了问题。我不希望div出现在某个位置，就像它出现在用户的视口中一样。

我使用opacity:0来隐藏div，然后使用$(this).animate({'opacity':'1'},500);来显示。

我一直找不到一个不使用库或jQuery的类似javascript选项。

我可以使用javascript实现下面的代码吗？

一个有效的jquery解决方案示例是：

$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window).scroll( function(){

/* Check the location of each desired element */
$('.scroll-in').each( function(i){

var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();

/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){

$(this).animate({'opacity':'1'},500);

}

}); 

});

});

#container
{
height:2000px;    
}
#container div
{ 
margin:50px; 
padding:50px; 
background-color:blue; 
}
.scroll-in
{
opacity:0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">

<div>Show</div>
<div>Show</div>
<div class="scroll-in">Fade In</div>
<div class="scroll-in">Fade In</div>
<div class="scroll-in">Fade In</div>

</div>

Answer 1

您想要使用的是intersection observer-这是一种确定元素何时在vieport中的html5方法。这可以用于时髦的效果-例如自动播放视频-只有当视频在视口中时-(例如：Facebook(。。。或者延迟加载图像。

注意，您可以指定元素必须在视口中才能产生效果的量——这是"；阈值"；在配置选项中。

还要注意的是，IE中不支持交集观测器，所以您要么需要使用polyfill，要么像我在示例中提供的那样使用回退。

let paragraphs = document.querySelectorAll('p');
if ('IntersectionObserver' in window) {
// IntersectionObserver Supported
let config = {
root: null,
rootMargin: '0px',
threshold: 1
};
let observer = new IntersectionObserver(onChange, config);
paragraphs.forEach(paragraph => observer.observe(paragraph));
function onChange(changes, observer) {
changes.forEach(change => {
if (change.intersectionRatio > 0) {
// Stop watching and load the image
showParagraph(change.target);
observer.unobserve(change.target);
}
});
}
} else {
// IntersectionObserver NOT Supported
paragraphs.forEach(paragraph => showParagraph(paragraph));
}
function showParagraph(paragraph) {
paragraph.classList.add('fade-in');
}

p {
opacity: 0
}
.fade-in {
animation-name: fadeIn;
animation-duration: 1000ms;
animation-timing-function: cubic-bezier(0, 0, 0.4, 1);
animation-fill-mode: forwards;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

<h2>Scroll me to see paragraphs appear when the are fully within the viewport </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<p>
<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Answer 2

您可以使用IntersectionObserver使用简单的javascript来实现这一点。这里有一个快速的骨架示例：

const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (entry.intersectionRatio > .5) {
entry.target.classList.add('active');
}
else {
entry.target.classList.remove('active');
}
}
});
}
const observer = new IntersectionObserver(callback, {threshold: 1});
document.querySelectorAll('div').forEach(d => observer.observe(d));

div {
background: bisque;
min-height: 100px;
width: 50%;
margin-bottom: 0.5rem;
opacity: 0;
transition: all 0.5s ease-out;
}

div.active {
background: tomato;
width: 100%;
opacity: 1;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>