如何在视口中显示HTML元素的部分数量

Question

• 是否可以知道在当前视口中是否可以查看像图像这样的HTML元素，或者在滚动时它是否可见？
  • 如果可以完全或部分查看，那么如何才能看到部分数量？

我试图从下图解释它：

底部的两个图像在视口中部分可见，如果向下滚动一点，这些图像将完全可见。

现在我想得到上述信息。

在实际场景中，我试图在我的相册中将图像悬停在弹出缩放效果上，例如谷歌图片搜索。一切都很好，除非图像以所描述的方式放置，然后缩放的div也显示为一半。

图像完全在视口中的正常情况：

部分在视口中：

我非常感谢你的帮助。

代码：

var albumDetailOnReady = function() {  

    $('.image').each(function(){
        var photo = $(this);
        var wrap = $(findParentByClassName(document.getElementById(photo.attr('id')), 'wrap'));
        var row = $(findParentByClassName(document.getElementById(wrap.attr('id')), 'albumDetailRow'));
        var visibleZone = $(wrap).find('.alDtlColumn');
        var pictureBlock = $(visibleZone).find('.pictuteBlock');        
        var hiddenZone = $(wrap).find('.hiddenZone');        

        $(photo).load(function(){
            if(177 > $(photo).width()){
                var imgleft = ($(pictureBlock).width() - $(photo).width())/2 + 'px';
                $(photo).css({'left': imgleft});
            }
        });

        $(photo).hover(function(){                         
            var y;            
            if($(photo).height() > $(photo).width()) {
                y = ($(visibleZone).offset().top - 50) + 'px';               
            } else {
                y = ($(visibleZone).offset().top + 50) + 'px';
            }         

            var x;
            if($(row).find('.wrap:first').attr('id') === $(wrap).attr('id')) {
                x = ($(visibleZone).offset().left - 10) + 'px';
            } else if($(row).find('.wrap:last').attr('id') === $(wrap).attr('id')) {
                x = ($(visibleZone).offset().left - 50) + 'px';
            } else {
                x = ($(visibleZone).offset().left - 20) + 'px';
            }

            $(hiddenZone).css({
                'top': y,
                'left': x,                
                'position': 'absolute',
                'z-index': '10'
            });          

            $(hiddenZone).fadeIn('fast');
        }, function(){

        });

        $(hiddenZone).hover(function(){},function(){
            $(hiddenZone).hide().stop(true, true);
        });
    });   
}

var findParentByClassName = function(element, clazz) {
    while (element.parentNode) {
        element = element.parentNode;
        if (hasClass(element, clazz)) {
            return element;
        }
    }
    return null;
}

function hasClass(element, cls) {
    var regex = new RegExp('\\b' + cls + '\\b');
    return regex.test(element.className);
}   

我无法显示任何HTML，因为我没有，我在ADF框架中工作。

但是要解释一下：

每张图片都有两个区域：可见和隐藏。两者都在包装中。现在悬停一个图像，我正在显示隐藏的div。隐藏div的顶部和左侧由可见div的顶部和左侧以某种条件测量。

Answer 1

<强> jQuery.Viewport

非常有用且轻量级的jQuery插件，它使元素成为一个方便的视口，用于显示具有绝对位置的元素。该插件托管在GitHub上。你可以在那里看到它：

https://github.com/borbit/jquery.viewport