javascript - 使用 Javascript 在页面加载时缩放 div

Question

我正在使用以下代码在滚动到 View 中时显示一个 div。我想简化这一点并在页面加载时显示 div，而不是在滚动到 View 中时显示。任何帮助都会很棒。非常感谢。

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使元素在视口(viewport)中可见。

您可以使用 DOMContentLoaded事件以了解 DOM 何时准备就绪。

注意:选项对象 - { behavior: 'smooth', block: 'center' } 仅受 Chrome 和 Firefox 支持。其他浏览器仅支持 alignToTop bool 值，并且由于该对象的计算结果为 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>