主页 / 问题 / 686775
Accepted
Nikolay
Asked:2020-07-04 00:47:49 +0000 UTC2020-07-04 00:47:49 +0000 UTC

块在视图中时的动画

  • 772

我无法解决滚动时播放一次性动画的问题。我仅在块完全位于可见区域时找到了一个示例。但是一旦他出现在能见度范围内就必须这样做。这是一个小代码：

$(".load-marker").addClass('load-not-active');
var $win = $(window);
var $marker = $('.load-marker');
$win.scroll(function() {
    $marker.each(function() {
        if ($win.scrollTop() + $win.height() >= $( this ).offset().top &&) {
            ...
        } else {
            ...
        }
    });
});

但是动画同时适用于当前块上方的所有块。也就是说，如果用户刷新页面并且滚动保持在页面的中心，那么动画将对它上面的所有元素起作用。并且动画必须仅适用于可见区域中出现的内容。

javascript

1 个回答

  1. Best Answer

    您需要确定页面高度、元素高度、滚动高度和元素距页面边缘的偏移量。试试这段代码，这里每个 div 只有在完全在范围内时才会突出显示：

    <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<style type="text/css">

        div {

            width: 400px;
            height: 400px;
            margin-right: 100%;
            background: #eee;
            margin-bottom: 10px;

        }

</style>

<script type="text/javascript">
var window_height = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));

window.addEventListener('scroll', function() {

    var elements = document.querySelectorAll('div');
    var top = document.body.scrollTop;
    var find = false;
    elements.forEach(function(el) {

        var el_top = el.offsetTop;
        if(el_top > top && ((el.clientHeight + el_top) < (top + window_height))) {
            el.style.backgroundColor = "#999";
        }

    });

});

    • 3

相关问题