使用JavaScript在頁面加載上縮放div

Question

當滾動到視圖中時，我使用以下代碼顯示div。 我想簡化此過程，並在頁面加載時顯示div，而不是在滾動到視圖時顯示div。 任何幫助都會很棒。 非常感謝。

 var animateHTML = function () { var elems, windowHeight var init = function () { elems = document.getElementsByClassName('hidden') windowHeight = window.innerHeight _addEventHandlers() } var _addEventHandlers = function () { window.addEventListener('scroll', _checkPosition) window.addEventListener('resize', init) } var _checkPosition = function () { for (var i = 0; i < elems.length; i++) { var posFromTop = elems[i].getBoundingClientRect().top if (posFromTop - windowHeight <= 0) { elems[i].className = elems[i].className.replace('hidden', 'fade-in-element') } } } return { init: init } } animateHTML().init() 

Answer 1

您可以使用Element＃scrollIntoView使該元素在視口中可見。

您可以使用DOMContentLoaded事件來了解DOM准備就緒的時間。

注意 ：僅Chrome和Firefox支持options對象- { behavior: 'smooth', block: 'center' } 。 其他瀏覽器僅支持alignToTop布爾值，並且由於該對象的值為true該元素將跳到頂部。

 document.addEventListener("DOMContentLoaded", function(event) { document.querySelector('.active').scrollIntoView({ behavior: 'smooth', block: 'center' }); }); 

 .block { width: 100px; height: 100px; border: 1px solid red; } .active { border: 1px solid blue; } 

 <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> <div class="block active">Scroll into view</div> <div class="block"></div> <div class="block"></div>