我有一个可滚动的div的拇指列表,动画与next / prev按钮.每次点击“下一步”按钮都应该与第一个可见元素的属性相匹配.每次点击“上一级”按钮应该给我最后一个可见元素的属性.
我真的不知道如何在数学上解决这个问题,因为当列表结束时滚动距离是可变的.有人可以帮我吗
- $<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},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},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},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');
- }
- });
- });
- });