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

时间:2014-07-26 18:42:44

标签: jquery css

直接诚实,寻求一些帮助来完成一个工作项目!

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

 <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页面。

1 个答案:

答案 0 :(得分:0)

我为您开发了一个快速而肮脏的解决方案。请参阅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);
});

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

希望这有帮助!