直接诚实,寻求一些帮助来完成一个工作项目!
好的,我在一个带有可滚动子元素的页面上有一个居中的容器:
<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页面。
答案 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);
});
如果您有任何疑问或疑问,请与我们联系。 (另外,下次尝试发布更多代码并寻求更多离散问题的帮助。)
希望这有帮助!