jquery - 带有事件/非事件箭头按钮的子元素 Onclick 的平滑滚动

Question

直率诚实，寻求一点帮助来完成工作元素!

好的，我在带有可滚动子元素的页面上有一个居中容器:

 <div class ="project-wrap">
   <div class="project-detail" id="project-detail1"></div>
   <div class="project-detail" id="project-detail2"></div>
   <div class="project-detail" id="project-detail3"></div>
   .
   .
   .
   .
</div>

我正在寻找的是一个 CSS 或 jQuery 解决方案，用户可以通过单击“向上”或“向下”箭头在每个 .project-detail 之间平滑滚动，但需要注意的是，当第一个子项出现在 View 中时，向上箭头被禁用/不活动/降低不透明度，相反，当最后一个 child 在 View 中时，“向下”箭头同样通过类更改被禁用/不活动/降低不透明度，例如。 “.不活跃”。

感谢并非常感谢任何想法!

附录:需要说明的是，父容器 (.project-wrap) 是发生滚动的地方，而不是整个主体或 html 页面。

Answer 1

我为您开发了一个快速而肮脏的解决方案。参见 this jsFiddle .

它相当简单，可以进行一些改进(变量缓存、错误检查等)，但它应该为您指明正确的方向:

$(".project-wrap").scroll(function(e) {
   var currentScrollInDiv = $(".project-wrap").scrollTop();
    if (currentScrollInDiv <= detailPositions[0]) {
        $("#down").removeClass("inactive");
        $("#up").addClass("inactive");
    } else if (currentScrollInDiv >= detailPositions[detailPositions.length-1]) {
        $("#up").removeClass("inactive");
        $("#down").addClass("inactive");
    } else {
        $(".scrollButton").removeClass("inactive");
    }
});

$("#up").click(function(e) {
    var currentScrollInDiv = $(".project-wrap").scrollTop();
    var scrollTo = 0;
    for (var i=0; i<detailPositions.length; i++) {
        scrollTo = (detailPositions[i]<currentScrollInDiv-1) ? detailPositions[i] : scrollTo; //avoid rounding errors
    }
    $(".project-wrap").scrollTop(scrollTo);
});
$("#down").click(function(e) {
    var currentScrollInDiv = $(".project-wrap").scrollTop();
    var scrollTo = null;
    for (var i=detailPositions.length-1; i>=0; i--) {
        scrollTo = (detailPositions[i]>currentScrollInDiv+1) ? detailPositions[i] : scrollTo; //avoid rounding errors
    }
    if (scrollTo) $(".project-wrap").scrollTop(scrollTo);
});

var detailPositions = [];

$('.project-detail').each(function() {
    detailPositions.push($(this).position().top);
});

如果您有任何问题或困难，请告诉我。 (此外，下次尝试发布更多代码并寻求更多离散问题的帮助。)

希望这对您有所帮助!