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解决方案，用户可以通过点击＆＃34; up＆＃34;来平滑地在每个.project-detail之间滚动。或＆＃34; down＆＃34;箭头警告当第一个孩子在视野中时，向上箭头被禁用/不活动/低不透明度，相反，当最后一个孩子在视野中时，向下＆＃34;向下＆＃34;箭头类似地通过类别改变禁用/不活动/降低不透明度，例如。＆＃34; .inactive＆＃34;

感谢并赞赏任何想法！

附录：为了清楚起见，父容器（.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);
});

如果您有任何疑问或疑问，请与我们联系。（另外，下次尝试发布更多代码并寻求更多离散问题的帮助。）

希望这有帮助！

使用活动/非活动箭头按钮平滑滚动子元素Onclick

1 个答案: