Question

我写了一个脚本：

jQuery(function($) {
        $('.count').countTo({
            from: 0,
            to: '400',
            speed: '3000',
            refreshInterval: 50,
            onComplete: function(value) {
                console.debug(this);
            }
        });
    });

我只需要在容器div可见时运行该脚本。

<div class="container">
   <div class="count"></div>
</div>

为了澄清，div将始终可见，但是当用户将其滚动到视图中时。有什么想法吗？

http://www.windycitydigital.net/iconvert/ - 示例，在页面底部，这些计数器会自动启动。我不希望该脚本启动，直到用户滚动查看它们为止。

Answer 1

以下是仅当#mydiv在视图中时才会激活警报的示例：这就像你问的那样有效。确保窗口很小，因此#midiv从一开始就不在视野中。向下滚动后，在整个#mydiv可见后，它将从滚动事件激活警报。

http://jsfiddle.net/u3eCG/7/

divScroll = $("#mydiv").offset().top + $("#mydiv").height();

$(window).scroll(function(){
   lastLineScroll = $("body").scrollTop() + $(window).height();
   if (divScroll < lastLineScroll)  {
                     alert("Div is visible");
                     $(window).unbind("scroll");
   }
});

Answer 2

什么代码shoud hide / show div？例如，您可以使用此代码显示div

$('.container').show(0, onContainerVisible);

function onContainerVisible(){
 jQuery(function($) {
    $('.count').countTo({
        from: 0,
        to: '400',
        speed: '3000',
        refreshInterval: 50,
        onComplete: function(value) {
            console.debug(this);
        }
    });
});
}

Answer 3

如果您的浏览器兼容性要求支持它...... MutationObserver可能是一个很好的候选者

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Answer 4

你可以做这样的事情......

function isViewed(selector) {

    var viewport = $(window),
        item = $(selector);

    var viewTop = viewport.scrollTop(),
        viewBtm = viewport.scrollTop() + viewport.height(),
        itemTop = item.offset().top,
        itemBtm = item.offset().top + item.height();

    return ((itemTop < viewBtm) && (itemTop > viewTop));
};

var counter = setInterval(function() {countdown()}, 500);

var countdown = function() {
    console.log('are you there?');
    if(isViewed('#mydiv')) {
        clearInterval(counter);    
        console.log('yes i am here.'); // call countdown here 
    }
};

这是一个jsfiddle来演示 http://jsfiddle.net/pixelchemist/aLT7w/

如果DIV在视图中如何只运行脚本？

4 个答案: