Получите первый и последний видимый элемент в прокручиваемом Div
-
28-10-2019 - |
Вопрос
У меня есть список больших пальцев в прокручиваемом Div, анимированном с помощью следующей/прежней кнопки. Каждый нажмите кнопку «Далее», должен соответствовать атрибуту первого видимого элемента. Каждый нажмите на кнопку «Предыдущая» должна дать мне атрибут последнего видимого элемента.
Я действительно не знаю, как математически решить это, потому что расстояние прокрутки является переменным, когда список заканчивается. Кто -нибудь может мне помочь?
HTML
$<div id="scrollContent">
<ul id="assetList">
<li data-asset-id="15201"></li>
<li data-asset-id="15202"></li>
<li data-asset-id="15203"></li>
...
</ul>
</div>
<a class="next" href="#">next</a>
<a class="prev" href="#">prev</a>
jQuery
$('a.next').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
$("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {
// get "data-asset-id" of first visible element in viewport
});
});
$('a.prev').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
$("#scrollContent").animate({scrollTop:scrollheight-375},500,function() {
// get "data-asset-id" of last visible element in viewport
});
});
Проверьте скрипку:http://jsfiddle.net/descodlov/77xjd/10/
Спасибо.
Решение
Это то, что ты ищешь ?? :
var first, last;
$('a.next').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
$("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {
$("#assetList li").each(function() {
if ($(this).offset().top == 1 && $(this).offset().left == 0) {
first = $(this).attr('data-asset-id');
}
});
});
});
$('a.prev').click(function() {
var scrollheight = $("#scrollContent").scrollTop();
$("#scrollContent").animate({scrollTop:scrollheight-375},500,function() {
var Otop = $("#scrollContent").height() - $("#assetList li").height() - parseInt($("#assetList li").css('margin-top'));
var Oleft = ($("#assetList li").width() + parseInt($("#assetList li").css('margin-right'))) * 3;
$("#assetList li").each(function() {
if ($(this).offset().top == Otop && $(this).offset().left == Oleft) {
last = $(this).attr('data-asset-id');
}
});
});
});
Скрипка: http://jsfiddle.net/77xjd/17/
Другие советы
По видимости, я предполагаю, что элемент должен, по крайней мере, иметь вид на верхний угол. Если вы хотите выбрать только элементы, которые полностью видны, добавьте или нарушайте width()
а также height()
значения элемента. Базовый код показан ниже:
var $first, $last,
$container = $("#assetList"),
$items = $container.children("li"),
positions = container.offset(),
rightside = positions.left + $container.width(),
bottomside = positions.top + $container.height();
$items.each(function(){
var $this = $(this),
position = $this.offset();
// If <li> top post >= <ul> top
if ($first && position.top >= positions.top
// If <li> left >= <ul> left
&& positions.left >= position.left) {
/* Optionally, add two more conditions, to only accept elememts
which are fully visible:
&& positions.top + $this.height() <= bottomside
&& positions.left + $this.width() <= leftside
*/
$first = this;
}
// See previous comments.
if (position.top < bottomside && position.left < rightside) {
$last = this;
}
});
// $first = first visible element, eg [HTMLLiElement]
// $last = last visible element, eg [HTMLLiElement]
Я только что обновил решение в вашем скрипка.
Я кэшировал первые верхние и последние верхние позиции LI во время инициализации и используя их, чтобы выяснить, какой элемент получает позицию, когда вы нажимаете на следующую или предыдущую кнопку.
И, конечно, я скопировал ниже линии Роб У отвечать.
var $container = $("#assetList"),
$items = $container.children("li"),