スクロール可能なdivで最初と最後の目に見える要素を取得します
-
28-10-2019 - |
質問
次のボタンでアニメーション化されたスクロール可能なDivに親指のリストがあります。 [次の]ボタンをクリックするたびに、最初の表示される要素の属性と一致するはずです。 [Prev]ボタンをクリックするたびに、最後の表示される要素の属性が表示されます。
リストが終了するとスクロール距離が変動するため、数学的にそれを解決する方法を本当に知りません。誰かが私を助けてくれませんか?
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');
}
});
});
});
他のヒント
可視性により、私は要素が少なくともアッペラスコーナーを見えるはずだと思います。完全に見える要素のみを選択する場合は、 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]
所属していません StackOverflow