Как определить, что HTML-элемент находится в представлении?

Question

Желательно, используя Jquery, как определить, находится ли элемент в видимой клиентской области браузера?

Я динамически создаю меню из набора данных, и когда список становится слишком длинным, высота результирующего меню приводит к тому, что часть его падает ниже нижней области браузера. Как я могу обнаружить это и действовать соответственно?

Answer 1

Я считаю, что можно приготовить что-нибудь, используя position() и scrollTop() (добавьте scrollLeft, если ваша страница склонна к горизонтальная прокрутка). Вот некоторый непроверенный пример кода, который должен отображать сообщение, если целевой элемент (полностью или частично) находится в области просмотра:

var pos = $('#element').position(), win = $(window);

if (pos.top < win.height() + win.scrollTop() && pos.bottom > win.scrollTop()) {
    alert('Look at me!');
}

Условия можно поменять местами, если вам нужна полная видимость:

if (pos.bottom < win.height() + win.scrollTop() && pos.top > win.scrollTop()) {

Добавление поддержки горизонтальной прокрутки окна просмотра оставлено в качестве упражнения для читателя:)