将上一个/下一个按钮添加到针对DIVS的水平内容滚动条
我已经为div上的一些滚动实现了jQuery Custom Scroller ，这非常有用。 我甚至使用平滑滚动来水平滚动到某些DIV但我的问题是我想要一个下一个和上一个导航按钮，我无法在任何地方找到它。
下面是我的HTML和jQuery。 先谢谢
我已经为div上的一些滚动实现了jQuery Custom Scroller ，这非常有用。 我甚至使用平滑滚动来水平滚动到某些DIV但我的问题是我想要一个下一个和上一个导航按钮，我无法在任何地方找到它。
下面是我的HTML和jQuery。 先谢谢
CSS：
#source-container{ overflow-x: hidden; overflow-y: hidden; } .source-item{ float: left; display: inline-block; background-repeat:no-repeat; background-size:cover; background-position: center; -moz-background-size: cover; } #source-container .one{background-image:url(images/source/1-the-cedarberg.jpg);} #source-container .two{background-image:url(images/source/2-the-cedarberg.jpg);} #source-container .three{background-image:url(images/source/3-the-cedarberg.jpg);} #source-container .four{background-image:url(images/source/4-the-cedarberg.jpg);} #source-container .five{background-image:url(images/source/5-the-cedarberg.jpg);} #source-container .six{background-image:url(images/source/6-the-cedarberg.jpg);} #source-container .seven{background-image:url(images/source/2-our-farm.jpg);} #source-container .eight{background-image:url(images/source/1-our-farm.jpg);} #source-container .nine{background-image:url(images/source/3-our-farm.jpg);} #source-container .ten{background-image:url(images/source/4-our-farm.jpg);} #source-container .eleven{background-image:url(images/source/1-our-rooibos.jpg);} #source-container .twelve{background-image:url(images/source/6-the-cedarberg.jpg);} #source-container .thirteen{background-image:url(images/source/1-the-cedarberg.jpg);} #source-container .fourteen{background-image:url(images/source/2-the-cedarberg.jpg);} #source-container .fifteen{background-image:url(images/source/3-the-cedarberg.jpg);} #source-container .sixteen{background-image:url(images/source/4-the-cedarberg.jpg);} #source-container .seventeen{background-image:url(images/source/5-the-cedarberg.jpg);} #source-container .eighteen{background-image:url(images/source/6-the-cedarberg.jpg);} #source-container .nineteen{background-image:url(images/source/1-the-cedarberg.jpg);} #source-container .twenty{background-image:url(images/source/2-the-cedarberg.jpg);} #source-container .twentyone{background-image:url(images/source/3-the-cedarberg.jpg);} #source-container .twentytwo{background-image:url(images/source/4-the-cedarberg.jpg);} .mCSB_dragger_bar{box-sizing:border-box;} .source-item{border-right:5px solid #e1001a; border-left:5px solid #3c1c11;}
脚本：
$(function(){ $('.container-inner').css({'width':(jQuery(window).width())*22+'px'}); $(window).resize(function(){ $('.container-inner').css({'width':(jQuery(window).width())*22+'px'}); }); }); $(document).ready(function(e) { $("#source-container").mCustomScrollbar({ horizontalScroll:true, mouseWheelPixels: 500, autoDraggerLength: false, callbacks:{ onScroll:function(){ $("."+this.attr("id")+"-pos").text(mcs.left); } } }); }); $(function(){ $('#source-container').css({'height':(jQuery(window).height())/100*80+'px'}); $(window).resize(function(){ $('#source-container').css({'height':(jQuery(window).height())/100*80+'px'}); }); }); $(function(){ $('.source-item').css({'width':(jQuery(window).width())+'px'}); $(window).resize(function(){ $('.source-item').css({'width':(jQuery(window).width())+'px'}); }); }); $(function(){ $('.source-item').css({'height':($('#source-container').height())+'px'}); $('#source-container').resize(function(){ $('#source-item').css({'height':($('#source-container').height())+'px'}); }); }); $(".output a[rel~='_mCS_2_scrollTo']").click(function(e){ e.preventDefault(); $("#source-container").mCustomScrollbar("scrollTo",$(this).attr("href")); }); $('ul li a').on('click', function() { $('ul li a.active').removeClass('active'); $(this).addClass('active'); }); $('.source-slide-dropdown').on('click', function() { $('.source-slide-dropdown').css('border-bottom-right-radius','0px'); });
如何将“Next”和“Prev”按钮连接到插件的scrollTo方法？ 从您提供的文档链接，看起来您可以滚动到给定ID的元素（要求每个元素都有一个id而不是使用元素索引滚动）由于某种原因：
var elID="#el-1"; $(".content").mCustomScrollbar("scrollTo",elID);
获取当前项目在滚动条中没有太多支持，因此您可能必须自己管理（通过滚动或单击下一个/上一个按钮可以更新的索引）并使用该方法上面滚动到下一个div。
我使用常规卷轴（不是插件）为此做了一个小提琴 。 这是javascript的源代码：
var currentElement = $("#wrapper > div:nth-child(2)"); var onScroll = function () { //get the current element var container = $("#source-container"); var wrapper = $("#wrapper"); var children = wrapper.children(); var position = 0; for (var i = 0; i < children.length; i++) { var child = $(children[i]); var childLeft = container.offset().left < child.offset().left; if (childLeft) { currentElement = child; console.log(currentElement) return; } } } var indexClick = function () { console.log($("#inputScrollIndex").val()) var index = parseInt($("#inputScrollIndex").val(), 10) - 1; if (index < 1) { index = 0; } console.log(index); scrollToIndex(index); } var scrollToIndex = function (index) { var element = $($("#wrapper").children()[index]); scrollToElement(element); } var scrollToElement = function ($element) { var container = $("#source-container"); var wrapper = $("#wrapper"); var children = wrapper.children(); var width = 0; for (var i = 0; i < children.length; i++) { var child = $(children[i]); if (child.get(0) == $element.get(0)) { if (i == 0) { width = 0; } container.animate({ scrollLeft: width }, 100); onScroll(); } if (child.next().length > 0) { //make sure we factor in borders/padding/margin in height width += child.next().offset().left - child.offset().left } else { width += child.width(); } } } var next = function (e) { scrollToElement(currentElement); } var prev = function (e) { var container = $("#source-container"); if (currentElement.prev().length > 0) { if (container.offset().left == currentElement.prev().offset().left) { currentElement = currentElement.prev().prev().length > 0 ? currentElement.prev().prev() : currentElement.prev(); } else { currentElement = currentElement.prev(); } } scrollToElement(currentElement); } $("#source-container").scroll(onScroll); $("#scrollIndex").click(indexClick); $("#next").click(next); $("#prev").click(prev);