Javascriptを使用してページの読み込みをズームする

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の準備が整ったことを知ることができます。

注：オプションオブジェクト - { 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>