Question

我正在使用以下JavaScript来确定元素是否在当前视口中可见。但是，这没有考虑边距和填充。如果可以看到“真实”元素，从而忽略边距和填充，有人可以帮我修改它以返回true吗？

实际JS：

(function ($) {
        $.fn.visible = function (partial) {

            var $t = $(this),
                $w = $(window),
                viewTop = $w.scrollTop(),
                viewBottom = viewTop + $w.height(),
                _top = $t.offset().top,
                _bottom = _top + $t.height(),
                compareTop = partial === true ? _bottom : _top,
                compareBottom = partial === true ? _top : _bottom;

            return compareBottom <= viewBottom && compareTop >= viewTop;
        };
    })(jQuery);

    var win = $(window);

    var allModifications = $(".animation-listener");

    //make all elements visible that are directly visible
    allModifications.each(function (i, el) {
        console.log("loaded js");
        var el = $(el);
        if (el.visible(true)) {
            el.find(".half-width-text").addClass("open");
        }
    });

    //make elements visible that get scrolled into the viewport
    win.scroll(function (event) {
        var current = 1;
        allModifications.each(function (i, el) {
            var el = $(el);
            if (el.visible(true)) {
                el.addClass("animate");
            }
        });
    });

Answer 1

使用createdAt代替使用height()。此方法返回匹配元素集合中第一个元素的当前计算出的外部高度（包括填充，边框和可选的边距），或者设置每个匹配元素的外部高度。

http://api.jquery.com/outerheight/

视口中可见的Javascript元素，没有边距

1 个答案: