當 div 在視口中時加載 Javascript

Question

這就是 HTML 文件中的 Div

<div class="inViewport">

只有當 div 在視口中時才應該加載此腳本

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            ToxProgress.create();
            ToxProgress.animate();
        });
    </script>

Answer 1

這是您應該查看的內容： 檢查滾動后元素是否可見

這是一個演示此技術的示例： http://jsfiddle.net/XYS2G/ - 只需嘗試滾動結果 window。

HTML：

<div class="indicators">
    <span class="indicator" data-id="section1">section1</span>
    <span class="indicator" data-id="section2">section2</span>
    <span class="indicator" data-id="section3">section3</span>
    <span class="indicator" data-id="section4">section4</span>
    <span class="indicator" data-id="section5">section5</span>
    <span class="indicator" data-id="section6">section6</span>
</div>
<div class="sections">
    <div class="section" id="section1">section1</div>
    <div class="section" id="section2">section2</div>
    <div class="section" id="section3">section3</div>
    <div class="section" id="section4">section4</div>
    <div class="section" id="section5">section5</div>
    <div class="section" id="section6">section6</div>
</div>

CSS：

.indicators { position: fixed; }
.section { height: 150px; }

Javascript：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function refreshIndicators() {
    $('.indicator').each(function () {
        if (isScrolledIntoView($('#' + $(this).attr('data-id')))) {
            $(this).css('color', 'red');
        } else {
            $(this).css('color', 'black');
        }
    });
}

refreshIndicators();

$(window).bind('scroll', refreshIndicators);

Answer 2

您好，感謝您的快速回復。 但是我想在div進入視口時運行腳本，因為有一個animation技能圈。

那是我的 div 與技能欄 cirlce inlcuded

<div id="inViewport">

那是新劇本

<script type="text/javascript">
if (document.getElementById("inViewport")){
   ToxProgress.create();
   ToxProgress.animate();
}
</script>

Answer 3

像這樣：但不工作......對不起，我是一個菜鳥

<script type="text/javascript">
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );

window.addEventListener("scroll resize", function() {
    if (isInViewport(document.getById("inViewport"))) {
       ToxProgress.create();
       ToxProgress.animate();
    }
});
</script>

Answer 4

我認為這個 function 會幫助你：

function isInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

（取自此處）然后，您需要監聽滾動事件，並且每次用戶滾動時，通過調用上面的 function 來檢查元素是否在視口中。 樣本：

window.addEventListener("scroll resize", function() {
    if (isInViewport(document.getById("inViewport"))) {
       ToxProgress.create();
       ToxProgress.animate();
    }
});