Question

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

必须出错的地方是

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

我很确定我只是忽略了一些简单的事情，但如果有人对此有什么建议，我会非常感激！

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

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

我希望我的描述不会造成混乱:)尝试小提琴，你可能会看到我的意思。

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

Answer 1

这不是完美的，但这是一个起点：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);
        }
    };

Answer 2

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

结果，我只是改变了行

scrollTo.offset().top

到

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

Here is the jsFiddle

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

jQuery滚动到元素不工作

2 个答案: