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

回答

相關問題