获取屏幕上最明显的元素 [英] Get the element which is the most visible on the screen

问题描述

我想获得屏幕上最明显的一个元素（占用最多的空间）。我在下面添加了一个示例图片，以便更多地了解我的问题。

I would like to get the one element which is the most visible on the screen (takes up the most space). I have added an example picture below to understand my question a bit more.

两个黑色边框是屏幕的两侧。如您所见，绿色框（div2）在屏幕上最明显 - 我想知道如何获得该元素。最明显的元素不应该是完全可见的。

The two black borders are the sides of a screen. As you can see, the green box (div2) is the most visible on the screen - I would like to know how I can get that element. The most visible element should not have to be fully visible.

我做了一个快速（它不是那么快）搜索但是没有用，如果我错过了它 - 我的道歉。

I have done a quick (it wasn't THAT quick) seach but to no avail, if I have missed it - my apologies.

推荐答案

TLDR：

灵感来自于此问题和我自己的项目中类似功能的必要性，我写了一个 module / jQuery插件基于以下代码。如果您对'how'不感兴趣，只需下载或安装您最喜欢的包管理器。

TLDR:

Inspired by this question and the necessity for similar functionality in my own projects, I've written a module/jQuery plugin based on the code below. If you're not interested in the 'how', just download that or install with your favourite package manager.

在大多数情况下，由exabyssus提供的答案运作良好，除非元素的顶部或底部是可见的，例如当元素高度大于窗口高度时。

The answer provided by exabyssus works well in most cases, apart from when neither of an element's top or bottom is visible e.g when the element height is greater than the window height.

这是一个更新版本，它考虑了这个场景并使用 getBoundingClientRect 支持直到IE8 ：

Here's an updated version which takes that scenario into account and uses getBoundingClientRect which is supported right the way down to IE8:

// Usage: var $element = getMostVisible( $( '.elements' ) );
function getMostVisible( $elements ) {
    var $element = $(),
        viewportHeight = $( window ).height(),
        max = 0;

    $elements.each( function() {
        var visiblePx = getVisibleHeightPx( $( this ), viewportHeight );

        if ( visiblePx > max ) {
            max = visiblePx;
            $element = $( this );
        }
    } );

    return $element;
}

function getVisibleHeightPx( $element, viewportHeight ) {
    var rect = $element.get( 0 ).getBoundingClientRect(),
        height = rect.bottom - rect.top,
        visible = {
            top: rect.top >= 0 && rect.top < viewportHeight,
            bottom: rect.bottom > 0 && rect.bottom < viewportHeight
        },
        visiblePx = 0;

    if ( visible.top && visible.bottom ) {
        // Whole element is visible
        visiblePx = height;
    } else if ( visible.top ) {
        visiblePx = viewportHeight - rect.top;
    } else if ( visible.bottom ) {
        visiblePx = rect.bottom;
    } else if ( height > viewportHeight && rect.top < 0 ) {
        var absTop = Math.abs( rect.top );

        if ( absTop < height ) {
            // Part of the element is visible
            visiblePx = height - absTop;
        }
    }

    return visiblePx;
}

这将返回基于像素而不是百分比的最可见元素元素的高度，这是我的用例的理想选择。如果需要，可以很容易地修改它以返回百分比。

This returns the most visible element based on pixels rather than as a percentage of the height of the element, which was ideal for my use-case. It could easily be modified to return a percentage if desired.

你也可以将它用作jQuery插件，这样你就可以用 $（'。elements'）。mostVisible（）而不是将元素传递给函数。要做到这一点，你只需要将它包含在上面的两个函数中：

You could also use this as a jQuery plugin so you can get the most visible element with $('.elements').mostVisible() rather than passing the elements to the function. To do that, you'd just need to include this with the two functions above:

$.fn.mostVisible = function() {
    return getMostVisible( this );
};

有了这个，您可以链接方法调用而不必将元素保存到变量中：

With that in place you can chain your method calls rather than having to save the element into a variable:

$( '.elements' ).mostVisible().addClass( 'most-visible' ).html( 'I am most visible!' );

以下所有内容都包含在一个小型演示中，你可以在SO上试试：

Here's all of that wrapped up in a little demo you can try out right here on SO:

(function($) {
  'use strict';

  $(function() {
    $(window).on('scroll', function() {
      $('.the-divs div').html('').removeClass('most-visible').mostVisible().addClass('most-visible').html('I am most visible!');
    });
  });

  function getMostVisible($elements) {
    var $element = $(),
      viewportHeight = $(window).height(),
      max = 0;

    $elements.each(function() {
      var visiblePx = getVisibleHeightPx($(this), viewportHeight);

      if (visiblePx > max) {
        max = visiblePx;
        $element = $(this);
      }
    });

    return $element;
  }

  function getVisibleHeightPx($element, viewportHeight) {
    var rect = $element.get(0).getBoundingClientRect(),
      height = rect.bottom - rect.top,
      visible = {
        top: rect.top >= 0 && rect.top < viewportHeight,
        bottom: rect.bottom > 0 && rect.bottom < viewportHeight
      },
      visiblePx = 0;

    if (visible.top && visible.bottom) {
      // Whole element is visible
      visiblePx = height;
    } else if (visible.top) {
      visiblePx = viewportHeight - rect.top;
    } else if (visible.bottom) {
      visiblePx = rect.bottom;
    } else if (height > viewportHeight && rect.top < 0) {
      var absTop = Math.abs(rect.top);

      if (absTop < height) {
        // Part of the element is visible
        visiblePx = height - absTop;
      }
    }

    return visiblePx;
  }

  $.fn.mostVisible = function() {
    return getMostVisible(this);
  }

})(jQuery);

.top {
  height: 900px;
  background-color: #999
}
.middle {
  height: 200px;
  background-color: #eee
}
.bottom {
  height: 600px;
  background-color: #666
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="the-divs">
  <div class="top"></div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

这篇关于获取屏幕上最明显的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！