jquery – 获取可滚动div中的第一个和最后一个可见元素

前端之家收集整理的这篇文章主要介绍了jquery – 获取可滚动div中的第一个和最后一个可见元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个可滚动的div的拇指列表,动画与next / prev按钮.每次点击“下一步”按钮都应该与第一个可见元素的属性相匹配.每次点击“上一级”按钮应该给我最后一个可见元素的属性.

我真的不知道如何在数学上解决这个问题,因为当列表结束时滚动距离是可变的.有人可以帮我吗

HTML

  1. $<div id="scrollContent">
  2. <ul id="assetList">
  3. <li data-asset-id="15201"></li>
  4. <li data-asset-id="15202"></li>
  5. <li data-asset-id="15203"></li>
  6. ...
  7. </ul>
  8. </div>
  9. <a class="next" href="#">next</a>
  10. <a class="prev" href="#">prev</a>

jQuery的

  1. $('a.next').click(function() {
  2. var scrollheight = $("#scrollContent").scrollTop();
  3. $("#scrollContent").animate({scrollTop:scrollheight+375},500,function() {
  4. // get "data-asset-id" of first visible element in viewport
  5.  
  6. });
  7. });
  8.  
  9. $('a.prev').click(function() {
  10. var scrollheight = $("#scrollContent").scrollTop();
  11. $("#scrollContent").animate({scrollTop:scrollheight-375},function() {
  12. // get "data-asset-id" of last visible element in viewport
  13.  
  14. });
  15. });

看看小提琴:
http://jsfiddle.net/desCodLov/77xjD/10/

谢谢.

解决方法

这是你想要的吗? :
  1. var first,last;
  2.  
  3. $('a.next').click(function() {
  4. var scrollheight = $("#scrollContent").scrollTop();
  5. $("#scrollContent").animate({scrollTop:scrollheight+375},function() {
  6. $("#assetList li").each(function() {
  7. if ($(this).offset().top == 1 && $(this).offset().left == 0) {
  8. first = $(this).attr('data-asset-id');
  9. }
  10. });
  11. });
  12. });
  13.  
  14. $('a.prev').click(function() {
  15. var scrollheight = $("#scrollContent").scrollTop();
  16. $("#scrollContent").animate({scrollTop:scrollheight-375},function() {
  17. var Otop = $("#scrollContent").height() - $("#assetList li").height() - parseInt($("#assetList li").css('margin-top'));
  18. var Oleft = ($("#assetList li").width() + parseInt($("#assetList li").css('margin-right'))) * 3;
  19. $("#assetList li").each(function() {
  20. if ($(this).offset().top == Otop && $(this).offset().left == Oleft) {
  21. last = $(this).attr('data-asset-id');
  22. }
  23. });
  24. });
  25. });

小提琴:http://jsfiddle.net/77xjD/17/

猜你在找的jQuery相关文章