使用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>