Я загружаю элементы через AJAX. Некоторые из них видны только при прокрутке страницы вниз.
Могу ли я узнать, находится ли элемент в видимой части страницы?
javascript
jquery
scroll
yoavf
источник
источник
Library.IsElementVisibleInContainer = function (elementSelector, containerSelector) { var containerViewTop = $(containerSelector).offset().top; var containerViewBottom = containerViewTop + $(containerSelector).height();
Ответы:
Это должно сделать трюк:
Простая служебная функция Это позволит вам вызвать служебную функцию, которая принимает искомый элемент, и если вы хотите, чтобы элемент был полностью виден или частично.
Применение
источник
window.innerHeight
вместо этогоelemTop
я использовал$(elem).position().top
иelemBottom
я использовалelemTop + $(elem).outerHeight(true)
.Этот ответ в ванили:
источник
isVisible = elementTop < window.innerHeight && elementBottom >= 0
? В противном случае половина элемента на экране возвращает false.Обновление: используйте IntersectionObserver
Лучший метод, который я нашел на данный момент, - это плагин jQuery . Работает как шарм.
источник
appear plugin
и вам, вероятно, просто нужно добавить!
куда-нибудь, чтобы получитьdisappear
плагин.Вот мое чистое решение JavaScript, которое работает, если оно также скрыто внутри прокручиваемого контейнера.
Демо здесь (попробуйте изменить размер окна тоже)
РЕДАКТИРОВАТЬ 2016-03-26: Я обновил решение для учета прокрутки мимо элемента, чтобы он скрывался над верхней частью контейнера с возможностью прокрутки. РЕДАКТИРОВАТЬ 2018-10-08: Обновлено для обработки при прокрутке вне экрана над экраном.
источник
return top <= document.documentElement.clientHeight && top >= 0;
Использование IntersectionObserver API (встроено в современные браузеры)
С помощью наблюдателя легко и эффективно определить, является ли элемент видимым в окне просмотра или в любом прокручиваемом контейнере .
Отпадает необходимость в прикреплении
scroll
события и ручной проверке обратного вызова, что повышает эффективность:Просмотр таблицы поддержки браузеров (не поддерживается в IE / Safari)
источник
Плагин jQuery Waypoints идет очень хорошо здесь.
На сайте плагина есть несколько примеров .
источник
$('#my-div').waypoint(function() { console.log('Hello there!'); }, { offset: '100%' });
Как насчет
После этого вы можете запускать все, что захотите, когда элемент будет виден вот так
Это работает для меня просто отлично
источник
Крутая функция Скотта Даудинга для моих требований - она используется для определения, прокручивается ли элемент на экране, т.е. его верхний край.
источник
WebResourcesDepot написал скрипт для загрузки при прокрутке, который некоторое время назад использовал jQuery . Вы можете посмотреть их Live Demo здесь . Основой их функциональности было следующее:
источник
Простая ваниль, чтобы проверить,
el
видим ли элемент ( ) в прокручиваемом div (holder
)Использование с JQuery:
источник
isScrolledIntoView - очень нужная функция, поэтому я попробовал ее, она работает для элементов, которые не выше, чем область просмотра, но если элемент больше, чем область просмотра, он не работает. Чтобы исправить это легко изменить условие
к этому:
Смотрите демо здесь: http://jsfiddle.net/RRSmQ/
источник
Большинство ответов здесь не учитывают, что элемент также может быть скрыт, потому что он прокручивается вне поля зрения div, а не только всей страницы.
Чтобы покрыть эту возможность, вы должны проверить, находится ли элемент в границах каждого из его родителей.
Это решение делает именно это:
Он также позволяет указать, какой процент должен быть виден в каждом направлении.
Это не покрывает вероятность того, что это может быть скрыто из-за других факторов, таких как
display: hidden
.Это должно работать во всех основных браузерах, так как используется только
getBoundingClientRect
. Я лично проверил это в Chrome и Internet Explorer 11.источник
источник
Вот еще одно решение от http://web-profile.com.ua/
Смотрите это в JSFiddle
источник
При этом учитываются любые отступы, границы или поля, которые есть у элемента, а также элементы, размер которых превышает саму область просмотра.
Чтобы назвать это используйте что-то вроде этого:
источник
Для jQuery есть плагин inview, который добавляет новое событие inview.
Вот некоторый код для плагина jQuery, который не использует события:
Я нашел это в комментарии здесь ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) парнем по имени Джеймс
источник
Мне нужно было проверить видимость элементов внутри прокручиваемого DIV контейнера.
источник
e.style.opacity > 0
в(!e.style.opacity || e.style.opacity > 0)
потому , что по умолчанию это пустая строка для меня в FF.Основываясь на этом великолепном ответе , вы можете немного упростить его, используя ES2015 +:
Если вы не заботитесь о том, чтобы верх выходил из окна, и просто заботились о том, чтобы нижняя часть была просмотрена, это можно упростить до
или даже однострочник
источник
Вы можете использовать плагин jquery "onScreen", чтобы проверить, находится ли элемент в текущем окне просмотра при прокрутке. Плагин устанавливает «: onScreen» селектора в true, когда селектор появляется на экране. Это ссылка на плагин, который вы можете включить в свой проект. " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "
Вы можете попробовать приведенный ниже пример, который работает для меня.
HTML-код:
CSS:
источник
У меня есть такой метод в моем приложении, но он не использует jQuery:
Изменить: Этот метод хорошо работает для IE (по крайней мере, версия 6). Прочитайте комментарии для совместимости с FF.
источник
var visibleBottom = visibleTop + window.innerHeight;
я не использую jQuery, и вы помогли мне найти правильный ответ.Если вы хотите настроить это для прокрутки элемента в другом div,
источник
Изменили принятый ответ, чтобы элементу было присвоено свойство display, отличное от «none», с качеством как видимым.
источник
Вот способ добиться того же, используя Mootools, в горизонтальном, вертикальном или в обоих направлениях.
источник
Пример, основанный на этом ответе, проверяет, является ли элемент видимым на 75% (т.е. менее 25% его находится за пределами экрана).
источник
На этот вопрос есть более 30 ответов, и ни один из них не использует удивительно простое, чистое решение JS, которое я использовал. Нет необходимости загружать jQuery просто для решения этой проблемы, как это делают многие другие.
Чтобы определить, находится ли элемент в области просмотра, мы должны сначала определить положение элементов в теле. Нам не нужно делать это рекурсивно, как я когда-то думал. Вместо этого мы можем использовать
element.getBoundingClientRect()
.Это значение представляет собой разницу Y между вершиной объекта и вершиной тела.
Затем мы должны сказать, находится ли элемент в поле зрения. Большинство реализаций спрашивают, находится ли полный элемент в области просмотра, поэтому мы рассмотрим это.
Прежде всего, верхняя позиция окна:
window.scrollY
.Мы можем получить нижнюю позицию окна, добавив высоту окна к его верхней позиции:
Давайте создадим простую функцию для получения верхней позиции элемента:
Эта функция вернет верхнюю позицию элемента в окне или вернет,
0
если вы передадите ему что-то отличное от элемента с.getBoundingClientRect()
метода. Этот метод существует уже давно, поэтому вам не нужно беспокоиться о том, что ваш браузер не поддерживает его.Теперь верхняя позиция нашего элемента:
И или нижняя позиция элемента:
Теперь мы можем определить, находится ли элемент в области просмотра, проверяя, находится ли нижняя позиция элемента ниже верхней позиции области просмотра, и проверяя, находится ли верхняя позиция элемента выше нижней позиции области просмотра:
Оттуда вы можете выполнить логику, чтобы добавить или удалить
in-view
класс для вашего элемента, который вы затем сможете обрабатывать позже с помощью эффектов перехода в вашем CSS.Я абсолютно удивлен, что я не нашел этого решения где-либо еще, но я верю, что это самое чистое и эффективное решение, и оно не требует загрузки jQuery!
источник
Более эффективная версия этого ответа :
источник
Этот метод вернет true, если какая-либо часть элемента видна на странице. Это работало лучше в моем случае и может помочь кому-то еще.
источник
Простая модификация прокручиваемого div (контейнера)
ПРИМЕЧАНИЕ: это не работает, если элемент больше прокручиваемого div.
источник
Я адаптировал это короткое расширение функции jQuery, которое вы можете свободно использовать (лицензия MIT).
источник
Я написал компонент для этой задачи, предназначенный для чрезвычайно быстрой обработки большого количества элементов (до 10 мс для 1000 элементов на медленном мобильном телефоне). ).
Он работает с каждым типом контейнера прокрутки, к которому у вас есть доступ - окном, элементами HTML, встроенным iframe, порожденным дочерним окном - и очень гибок в обнаружении ( полная или частичная видимость , поле границы или поле содержимого , настраиваемая зона допуска и т. Д. ).
Огромный, в основном автоматически сгенерированный набор тестов гарантирует, что он работает как рекламируемый кросс-браузерный .
Дайте ему шанс, если вам нравится: jQuery.isInView . В противном случае вы можете найти вдохновение в исходном коде, например, здесь .
источник