使用Javascript缩放页面加载div

我使用以下代码来显示滚动到视图中的div。我想简化这一点，并显示页面加载时，而不是滚动到视图时。任何帮助都会很棒。非常感谢。使用Javascript缩放页面加载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()

来源

2017-10-17 virs90

您可以使用Element#scrollIntoView，使元素在视口中可见。

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

注意：选项对象 - { behavior: 'smooth', block: 'center' }仅受Chrome和Firefox支持。其他浏览器仅支持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>

来源

2017-10-17 11:30:46

使用Javascript缩放页面加载div

回答

相关问题