Question

我正在使用以下代码在滚动到视图时显示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支持选项对象 - { 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>

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

1 个答案: