0

我正在使用两列组合一个日历/事件页面。我已经设法完成了一些滚动工作（自动滚动到当前事件/月；通过单击日历中的事件摘要滚动到事件详细信息），但由于某种原因，我似乎无法获得向上/向下滚动以适用于任一列。我在上一个/下一个选择器上设置了一个“.current”类，它可以工作..但是滚动是不行的。也没有收到任何错误。

它必须出错的行是

container.animate({
    scrollTop: $('.current').offset().top -
                  container.offset().top +
                  container.scrollTop()
}, 500)

我相当肯定我只是忽略了一些简单的事情，但如果有人对什么有什么建议，我将非常感激！

更新： 我已经设法找到有关向上/向下滚动不起作用的问题。我引用了错误的选择器。

但是，我现在遇到了一个新问题。在第一次单击（向上或向下）时，尽管“当前”类已正确设置，但没有任何滚动。在第二次单击（相同方向）时，事情会滚动，但列表永远不会到达第一个/最后一个项目。在相反的方向单击时，列表继续在 -previous- 方向滚动一次，然后继续在正确的方向滚动。

我希望我的描述不会引起混淆 :) 试试小提琴，你可能会明白我的意思。

更新的代码可以在http://jsfiddle.net/4E4V8/3/找到。

4

2 回答 2

0

它并不完美，但这是一个起点：jsFiddle

我已经更改了 html，所以它对我来说更有意义：

  <div id="events-container">
        <div id="events-detail">
            <div class="container"></div>
            <div class="nav"></div>
        </div>
        <div id="events-overview">
            <div class="container"></div>                                    
            <div class="nav"></div>
        </div>
    </div>

.js 仍然不是 100% 正确，但主要思想是：

function navUp(e) {
        // get .container div
        var container = $(this.parentElement.previousElementSibling);
        // find .current event div
        var current = container.children(".current");
        // get the up span
        var button = $(e.target);
        // does .current event div has a next event div ? 
        if(current[0].nextElementSibling){
           // add .current to next event div
           var next = $(current[0].nextElementSibling).addClass("current");
           // remove .current class from original event div
           container.children("div").not(next).removeClass("current");
           // animate
           container.animate({
            scrollTop: current[0].nextElementSibling.offsetTop - current.offset().top
           }, 100);
        }
    };
于 2013-07-01T00:08:49.890 回答
0

如果您在if和else if中放置警报，alert(scrollTo.offset().top + ', ' + container.offset().top + ', ' + container.scrollTop());您会看到即使对象在第一次单击时没有移动，scrollTo.offset().top也会从第一次单击变为第二次单击。我不知道为什么，但事实并非如此。在我比较了第一次和第二次点击之间的差异并查看了对象的 CSS 之后，我发现第一次和第二次点击之间的差异是对象的高度 + 它的边距底部（您唯一的垂直边距）。

结果，我只是换了行

container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 300);

至

container.animate({
    scrollTop: scrollTo.height() + parseInt(scrollTo.css('margin-bottom')) + scrollTo.offset().top - container.offset().top + container.scrollTop()
}, 300);

这是 jsFiddle。

使用警报，尤其是变量值，对于调试非常有用

于 2013-07-01T01:43:36.940 回答