使用 JavaScript 在滾動上顯示 Div

Question

我試圖在用戶滾動頁面時顯示 div。 我正在嘗試使用 javascript 和 css 來執行此操作，而無需任何其他庫。

目前，我有一個使用 jQuery 的設置，可以完成工作，但我在尋找 javascript 唯一解決方案時遇到問題。 我不希望 div 出現在某個 position 中，就像它出現在用戶的視口中一樣。

我正在使用 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器 - 這是一種 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>