添加previous /下按钮来卧式内容滚轮定位DIVS [英] Add Previous/Next Buttons to Horizontal Content Scroller Targeting DIVS

查看：158 发布时间：2016/8/16 22:44:37 jquery button navigation cycle horizontal-scrolling

本文介绍了添加previous /下按钮来卧式内容滚轮定位DIVS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经实现 jQuery的自定义滚轮，获取有关的DIV一些滚动，这个伟大工程。我甚至使用平滑滚动横向滚动一定的DIV，但我的问题是，我想下一步，previous导航按钮，我找不到这个任何地方。

下面是我的HTML和jQuery。由于事前

 ＆LT; DIV ID =源容器＆GT;
        ＆LT; DIV CLASS =容器内＆GT;
                ＆LT; DIV CLASS =源项目的项目一个电流ID =最Cedarburg的＆GT;
                    ＆LT; DIV CLASS =源滑动标题＆GT;
                        ＆所述; H2＆gt;本Cedarburg的＆下; / H2＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项项两个ID =我们的农场＆GT;
                  ＆LT; / DIV＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目三ID =我们-博士茶＆GT;
                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目第四项ID =我们处理＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源逐项五ID =我们的创新＆GT;                  ＆LT; / DIV＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项第六项＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目七＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目八＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目九＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目十＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项项十一＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目十二条＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目十三＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目十四＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目十五＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目十六条＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项项十七＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项项18＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项项古诗十九首＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目廿＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项项twentyone＆GT;                ＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =源项目项目二十二岁＆GT;                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
 ＆LT; / DIV＆GT;

CSS：

 ＃源容器{
    溢出 -  X：隐藏;
    溢出-Y：隐藏;
}.source项{
浮动：左;
显示：inline-block的;
背景重复：不重复;
背景大小：盖;
背景位置：中心;
 -moz-背景大小：盖;
}＃源容器。一是{背景图像：网址（图片/来源/ 1最cedarberg.jpg）;}＃源容器。二{背景图像：网址（图片/来源/ 2的非cedarberg.jpg）;}＃源容器。三{背景图像：网址（图片/来源/ 3的非cedarberg.jpg）;}＃源容器。四{背景图像：网址（图片/来源/ 4的非cedarberg.jpg）;}＃源容器。五{背景图像：网址（图片/来源/ 5的非cedarberg.jpg）;}＃源容器。六{背景图像：网址（图片/来源/ 6的非cedarberg.jpg）;}＃源容器。七{背景图像：网址（图片/来源/ 2-我们-farm.jpg）;}＃源容器。八{背景图像：网址（图片/来源/ 1-我们-farm.jpg）;}＃源容器。九{背景图像：网址（图片/来源/ 3-我们-farm.jpg）;}＃源容器。十{背景图像：网址（图片/来源/ 4-我们-farm.jpg）;}＃源容器.eleven {背景图像：网址（图片/来源/ 1-我们-rooibos.jpg）;}＃源容器.twelve {背景图像：网址（图片/来源/ 6的非cedarberg.jpg）;}＃源容器.thirteen {背景图像：网址（图片/来源/ 1最cedarberg.jpg）;}＃源容器.fourteen {背景图像：网址（图片/来源/ 2的非cedarberg.jpg）;}＃源容器.fifteen {背景图像：网址（图片/来源/ 3的非cedarberg.jpg）;}＃源容器.sixteen {背景图像：网址（图片/来源/ 4的非cedarberg.jpg）;}＃源容器.seventeen {背景图像：网址（图片/来源/ 5的非cedarberg.jpg）;}＃源容器.eighteen {背景图像：网址（图片/来源/ 6的非cedarberg.jpg）;}＃源容器{。20世纪背景图像：网址（图片/来源/ 1最cedarberg.jpg）;}＃源容器.twenty {背景图像：网址（图片/来源/ 2的非cedarberg.jpg）;}＃源容器.twentyone {背景图像：网址（图片/来源/ 3的非cedarberg.jpg）;}＃源容器.twentytwo {背景图像：网址（图片/来源/ 4的非cedarberg.jpg）;}
.mCSB_dragger_bar {箱尺寸：边界盒;}.source项{右边框：5像素固体＃e1001a;左边框：5像素固体＃3c1c11;}

脚本：

 ＆LT;脚本＆GT;
$（函数（）{
 $（'容器内'）的CSS（{'宽度':( jQuery的（窗口）.WIDTH（））* 22 +'像素'}）;
    $（窗口）.resize（函数（）{
        $（'容器内'）的CSS（{'宽度':( jQuery的（窗口）.WIDTH（））* 22 +'像素'}）;
    }）;
}）;$（文件）。就绪（函数（五）{
$（＃源容器）。mCustomScrollbar（{
                    horizontalScroll：真实，
                    mouseWheelPixels：500，
                    autoDraggerLength：假的，
                    回调：{
                        onScroll：功能（）{
                            $（+ this.attr（ID）+ -  POS。）文本（mcs.left）。
                        }
                    }
                }）;
}）;$（函数（）{
 $（'＃源容器'）的CSS（{'高度':( jQuery的（窗口）.height（））/ 100 * 80 +'像素'}）;
    $（窗口）.resize（函数（）{
        $（'＃源容器'）的CSS（{'高度':( jQuery的（窗口）.height（））/ 100 * 80 +'像素'}）;
    }）;
}）;$（函数（）{
 $（'源项目。'）的CSS（{'宽度':( jQuery的（窗口）.WIDTH（））+'像素'}）;
    $（窗口）.resize（函数（）{
        $（'源项目。'）的CSS（{'宽度':( jQuery的（窗口）.WIDTH（））+'像素'}）;
    }）;
}）;$（函数（）{
$（'源项目。'）的CSS（{高度：（$（'＃源容器'）的高度（））+'像素'}）;
    $（'＃源容器'）。调整（函数（）{
        $（'＃源项目），CSS（{高度：（$（'＃源容器'）的高度（））+'像素'}）;
    }）;
}）;
$（输出[REL〜='_ mCS_2_scrollTo']）。点击（函数（五）{
                    亦即preventDefault（）;                    $（＃源容器）mCustomScrollbar（scrollTo，$（本）.attr（HREF））;
}）;
$（'UL李一'）。在（'点击'，功能（）{
    $（'UL李a.active'）removeClass移除（激活）。
    $（本）.addClass（激活）;
}）;$（'源滑盖下拉'）。在（'点击'，功能（）{
    $（'源滑盖下拉'）的CSS（'边框右下角半径'，'0像素'）。}）;
＆LT; / SCRIPT＆GT;

解决方案

如何钩住你的下一步和preV按钮插件的scrollTo的方法？
从您提供的文档链接，它看起来像你可以滚动到给定ID的元素（要求每个元素有一个id，而不是使用元素的索引滚动）出于某些原因：

  VAR ELID =＃EL-1;
$（内容）mCustomScrollbar（scrollTo，ELID）。

有没有获取在滚动当前项，所以你可能需要管理大量的支持，自己（通过可以通过滚动或点击下一个/ $ P $光伏更新索引按钮）和使用上面的方法将滚动到下一个分区。

我做了一个拨弄为此使用普通滚轮（不使用插件）。下面是它的JavaScript源：

  VAR currentElement = $（＃包装＆GT; DIV：第n个孩子（2））;
VAR onScroll =功能（）{
    //获取当前元素
    VAR容器= $（＃源容器）;
    VAR包装= $（＃包装）;
    变种孩子= wrapper.children（）;
    VAR位置= 0;
    对于（VAR I = 0; I＆LT; children.length;我++）{
        VAR孩子= $（儿童[I]）;
        。VAR childLeft = container.offset（）左，LT; child.offset（）左侧。
        如果（childLeft）{
            currentElement =小孩;
            的console.log（currentElement）
            返回;
        }
    }
}VAR indexClick =功能（）{
    的console.log（$（＃inputScrollIndex）。VAL（））
    VAR指数= parseInt函数（$（＃inputScrollIndex）VAL（），10。） -  1;
    如果（指数＆LT; 1）{
        索引= 0;
    }
    的console.log（指数）;
    scrollToIndex（索引）;
}VAR scrollToIndex =功能（指数）{
    VAR元= $（$（＃包装）儿童（）[指数]）;
    scrollToElement（元件）;
}VAR scrollToElement =功能（$元素）{
    VAR容器= $（＃源容器）;
    VAR包装= $（＃包装）;
    变种孩子= wrapper.children（）;
    变种宽度= 0;
    对于（VAR I = 0; I＆LT; children.length;我++）{
        VAR孩子= $（儿童[I]）;
        如果（child.get（0）== $ element.get（0））{
            如果（我== 0）{
                宽度= 0;
            }
            container.animate（{
                scrollLeft：宽
            }，100）;
            onScroll（）;
        }
        如果（child.next（）长度方式＆gt; 0）{
            //确保我们在高度边框/填充/保证金因素
            宽+ = child.next（）的偏移量（）左 - 。child.offset（）左右。
        }其他{
            宽+ = child.width（）;
        }
    }
}VAR下一=功能（E）{
    scrollToElement（currentElement）;
}VAR preV =功能（E）{
    VAR容器= $（＃源容器）;
    如果（。currentElement preV（）长度大于0）{
        如果（container.offset（）==左currentElement。preV（）。偏移（）。左）{
            。currentElement = currentElement preV（）preV（）长度GT; 0？ 。currentElement preV（）preV（）：currentElement preV（）;
        }其他{
            。currentElement = currentElement preV（）;
        }
    }
    scrollToElement（currentElement）;
}$（＃源容器），滚动（onScroll）;
$（＃scrollIndex），单击（indexClick）。
$（＃下一个）点击（下）;
$（＃preV）点击（preV）;

I have implemented jQuery Custom Scroller for some scrolling on an div, this works great. I even used smooth scrolling to horizontally scroll to certain DIVs but my problem is that I want a Next and Previous Navigation button and I cannot find this anywhere.

Below is my HTML and jQuery. Thanks Beforehand

<div id="source-container">
        <div class="container-inner">
                <div class="source-item item one current" id="the-cedarburg">
                    <div class="source-slide-title">
                        <h2>the cedarburg</h2>
                    </div>
                </div>
                <div class="source-item item two"  id="our-farm">


                  </div>

                </div>
                <div class="source-item item three"  id="our-rooibos">


                </div>
                <div class="source-item item four"  id="our-process">

                </div>
                <div class="source-item item five"  id="our-innovation">

                  </div>

                </div>
                <div class="source-item item six">

                </div>
                <div class="source-item item seven">

                </div>
                <div class="source-item item eight">

                </div>
                <div class="source-item item nine">

                </div>
                <div class="source-item item ten">

                </div>
                <div class="source-item item eleven">

                </div>
                <div class="source-item item twelve">

                </div>
                <div class="source-item item thirteen">

                </div>
                <div class="source-item item fourteen">

                </div>
                <div class="source-item item fifteen">

                </div>
                <div class="source-item item sixteen">

                </div>
                <div class="source-item item seventeen">

                </div>
                <div class="source-item item eighteen">

                </div>
                <div class="source-item item nineteen" >

                </div>
                <div class="source-item item twenty">

                </div>
                <div class="source-item item twentyone">

                </div>
                <div class="source-item item twentytwo">

                </div>
            </div>
    </div>
 </div>

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;}

Script:

<script>
$(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');  

});
</script>

解决方案

How about hooking up your "Next" and "Prev" buttons to the plugin's scrollTo method? From the documentation link you provided, it looks like you can scroll to an element given an ID (requires each element have an id rather than scrolling using element index) for some reason:

var elID="#el-1";
$(".content").mCustomScrollbar("scrollTo",elID);

There isn't a lot of support for getting the current item in the scroller, so you'll probably have to manage that yourself (through an index that can be updated either through scrolling or clicking the next/prev buttons) and use the method above to scroll to the next div.

I've made a fiddle for this using a regular scroller (not with the plugin). Here's javascript source of it:

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);

这篇关于添加previous /下按钮来卧式内容滚轮定位DIVS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

添加previous /下按钮来卧式内容滚轮定位DIVS [英] Add Previous/Next Buttons to Horizontal Content Scroller Targeting DIVS

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

添加previous /下按钮来卧式内容滚轮定位DIVS [英] Add Previous/Next Buttons to Horizontal Content Scroller Targeting DIVS

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭