Javascript 如何在内容刷卡时自动滚动到菜单

我需要自动滚动菜单时，我刷的内容左或右，例如。 当我向右滑动到第五面板幻灯片时，导航应该跳到或滚动到第五个菜单，但现在它停留或显示在菜单1中，或仅单击最后一个菜单

我的期望是像这样创造。

我希望实现两种情况，但我失败了，每次都会出错

如果我使菜单（所选菜单）左对齐或中对齐，则在屏幕初始加载时，菜单应始终处于左对齐或中对齐状态，并且当我滑动幻灯片内容时，菜单应左对齐或中对齐，例如上面的链接devexpress

当内容被滑动时，如第五面板幻灯片，则菜单应相对于该内容滚动

我在这里尝试了Jquery代码

$（文档）.ready（函数（）{
$.fn.scrollpane=函数（选项）{
选项=$。扩展({
方向：“水平”，
死区：25，
UseTransformation:false，
桌面：是的，
对,，
onscroll：函数（位置、页面、持续时间）{}，
onscrollfinish:函数（位置，页面）{}
}，选项）；
文档| |！options.desktop中的var isTouch=“ontouchend”，
onTouchstart=isTouch？“touchstart”：“鼠标向下”，
onTouchmove=isTouch？“touchmove”：“mousemove”，
onTouchend=isTouch？“触摸端”：“鼠标点击”；
返回此值。每个（函数（）{
//滚动窗格视口
var outerelm=$（此值）；
//包含滚动内容的大div
var innerElem=$（“”）；
innerlem.append（outereem.children（）.remove（））；
外部元素追加（内部元素）；
//将这些缓存起来以备将来使用
var outerWidth=outerelm.width（）；
var outerHeight=outerelm.height（）；
//布尔值
水平变量=（options.direction==“水平”）；
//用户必须拖动并释放以触发页面转换的像素数
//自然的
var deadzone=Math.max（0，options.deadzone）；
//当前页面的索引。在用户完成每个滚动手势后更改。
//整数
var-currentPage=0；
//页宽
//整数
var scrollUnit=水平？外径：外径；
//变换上的x坐标，-ve数字向右，
//所以这个变成-ve，就像currentPage变成+ve一样
//整数（像素）
var currentPos=0；
//最小和最大滚动位置：
//整数（像素）
var-max=0；
var scrollMin=-scrollUnit*（innerElem.children（）.length-1）；
//触摸后的结算时间：
//天然（ms）
var结算时间=200；
//拖动的每一帧都会更新dragMid和dragEnd：
//整数（像素）
var dragStart=0；//开始拖动时触摸位置
var dragMid=0；//上次touchmove事件上的触摸位置
var dragEnd=0；//此touchmove事件上的触摸位置
//+1如果沿+ve x方向拖动，-1如果沿-ve x方向拖动
//U（-1，+1）
var-dragDir=0；
if（options.setupCss）{
outereem.css({
职位：“相对”，
溢出：“隐藏”
});
//定位页面：
innerElem.children（）.each（函数（索引）{
$（this.css）({
位置：“绝对”，
显示：“块”，
宽度：外层宽度，
高度：外光
}).css（水平？“左”：“顶部”，滚动单位*索引）；
});
}
//自然布尔->空
功能滚动到（位置、持续时间、完成）{
var参数={}；
参数[（水平？'marginLeft'：'marginTop'）]=位置；
选项.onscroll（位置，-位置/滚动单位，持续时间）；
if（options.useTransformation）{
innerElem.css({
过渡：“无”，
变换：水平？（“translate3d（“+position+”px，0，0）”）：（“translate3d（0，“+position+”px，0）”）
});
}
如果（完成）{
如果（！options.useTransition）{
innerElem.find（'li'）.animate（参数、持续时间）；
}否则{
innerElem.css({
转换：“全部”+（持续时间===0？“0”：持续时间+“毫秒”）
});
}
setTimeout（函数（）{
选项。onscrollfinish（位置，-位置/滚动单位，持续时间）；
});
}如果（！options.useTransformation），则为else{
innerElem.find（'li'）.stop（）.css（参数）；
}
}
//立即在滚动窗格上设置3D变换。
//这将导致Safari创建OpenGL资源来管理动画。
//这有时会导致短暂的闪烁，因此最好在页面加载时进行
//而不是等到用户开始拖动。
滚动到（0，0，true）；
//绑定触摸拖动事件：
OutRelem.on（onTouchstart，函数（e）{
e=isTouch？e.originalEvent.触摸[0]| | e.originalEvent.更改触摸[0]：e；
dragStart=dragEnd=dragMid=horizontal？e.pageX:e.pageY；
//绑定触摸拖动事件：
$（this）.on（onTouchmove，函数（e）{
e=isTouch？e.originalEvent.触摸[0]| | e.originalEvent.更改触摸[0]：e；
dragEnd=水平？e.pageX:e.pageY；
dragDir=（dragEnd-dragMid）>0？1:-1；
currentPos+=dragEnd-dragMid；
dragMid=dragEnd；
$(document).ready(function(){
   $.fn.scrollpane = function(options) {

    options = $.extend({
        direction: "horizontal",
        deadzone: 25,
        useTransition: false,
        desktop: true,
        setupCss: true,
        onscroll: function(pos, page, duration) {},
        onscrollfinish: function(pos, page) {}
    }, options);

    var isTouch = "ontouchend" in document || !options.desktop,
        onTouchstart = isTouch ? "touchstart" : "mousedown",
        onTouchmove = isTouch ? "touchmove" : "mousemove",
        onTouchend = isTouch ? "touchend" : "mouseup";



    return this.each(function() {

        // the scroll pane viewport
        var outerElem = $(this);

        // a large div containing the scrolling content
        var innerElem = $("<div></div>");

        innerElem.append(outerElem.children().remove());

        outerElem.append(innerElem);

        // cache these for later
        var outerWidth = outerElem.width();
        var outerHeight = outerElem.height();

        // boolean
        var horizontal = (options.direction === "horizontal");

        // the number of pixels the user has to drag and release to trigger a page transition
        // natural
        var deadzone = Math.max(0, options.deadzone);

        // the index of the current page. changed after the user completes each scrolling gesture.
        // integer
        var currentPage = 0;

        // width of a page
        // integer
        var scrollUnit = horizontal ? outerWidth : outerHeight;

        // x coordinate on the transform. -ve numbers go to the right,
        // so this goes -ve as currentPage goes +ve
        // integer (pixels)
        var currentPos = 0;


        // min and max scroll position:
        // integer (pixels)
        var scrollMax = 0;

        var scrollMin = -scrollUnit * (innerElem.children().length - 1);

        // time to settle after touched:
        // natural (ms)
        var settleTime = 200;


        // dragMid and dragEnd are updated each frame of dragging:
        // integer (pixels)
        var dragStart = 0; // touch position when dragging starts
        var dragMid = 0; // touch position on the last touchmove event
        var dragEnd = 0; // touch position on this touchmove event
        // +1 if dragging in +ve x direction, -1 if dragging in -ve x direction
        // U(-1, +1)
        var dragDir = 0;

        if (options.setupCss) {

            outerElem.css({
                position: "relative",
                overflow: "hidden"
            });

            // position the pages:
            innerElem.children().each(function(index) {
                $(this).css({
                    position: "absolute",
                    display: "block",
                    width: outerWidth,
                    height: outerHeight
                }).css(horizontal ? "left" : "top", scrollUnit * index);
            });

        }

        // natural natural boolean -> void

        function scrollTo(position, duration, finish) {
            var parameters = {};
            parameters[(horizontal ? 'marginLeft' : 'marginTop')] = position;

            options.onscroll(position, -position / scrollUnit, duration);

            if (options.useTransition) {
                innerElem.css({
                    transition: "none",
                    transform: horizontal ? ("translate3d(" + position + "px, 0, 0)") : ("translate3d(0, " + position + "px, 0)")
                });
            }


            if (finish) {
                if (!options.useTransition) {
                    innerElem.find('li').animate(parameters, duration);
                } else {
                    innerElem.css({
                        transition: "all " + (duration === 0 ? "0" : duration + "ms")
                    });
                }
                setTimeout(function() {
                    options.onscrollfinish(position, -position / scrollUnit, duration);
                });
            } else if (!options.useTransition) {
                innerElem.find('li').stop().css(parameters);
            }
        }

        // Immediately set the 3D transform on the scroll pane.
        // This causes Safari to create OpenGL resources to manage the animation.
        // This sometimes causes a brief flicker, so best to do it at page load
        // rather than waiting until the user starts to drag.
        scrollTo(0, 0, true);




        // bind the touch drag events:
        outerElem.on(onTouchstart, function(e) {
            e = isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e;
            dragStart = dragEnd = dragMid = horizontal ? e.pageX : e.pageY;

            // bind the touch drag event:
            $(this).on(onTouchmove, function(e) {
                e = isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e;

                dragEnd = horizontal ? e.pageX : e.pageY;
                dragDir = (dragEnd - dragMid) > 0 ? 1 : -1;
                currentPos += dragEnd - dragMid;
                dragMid = dragEnd;
                scrollTo(currentPos, 0, false);
            });

            // bind the touch end event
        }).on(onTouchend, function(e) {

            // boolean
            var reset = Math.abs(dragEnd - dragStart) < deadzone;

            // real
            var scrollPage = -1.0 * currentPos / scrollUnit;

            // natural
            var nextPage = reset ? currentPage : (dragDir < 0 ? Math.ceil(scrollPage) : Math.floor(scrollPage));

            // int
            var nextPos = Math.max(scrollMin, Math.min(scrollMax, -scrollUnit * nextPage));

            currentPos = nextPos;
            currentPage = nextPage;

            scrollTo(nextPos, settleTime, true);
            outerElem.off(onTouchmove);

        });

        // set up the menu callback:
        outerElem.data("showpage", function(page) {
            // int
            page = page < 0 ? innerElem.children().length + page : page;
            currentPos = Math.max(scrollMin, Math.min(scrollMax, -page * scrollUnit));
            currentPage = -currentPos / scrollUnit;
            scrollTo(currentPos, settleTime, true);
        });

    });
};



// Once you've initialized a scrollpane with $().scrollpane(),
// you can use this method to cause it to programmatically scroll
// to a particular page. Useful for creating a navigation menu, or
// those little dots on Apple-store-style product galleries.
//
// Pages are indexed from 0 upwards. Negative numbers can be used
// to index pages from the right.
//
// int -> jQuery
$.fn.showpage = function(index) {
    var fn = this.data("showpage");
    fn(index);
    return this;
};


$(document).bind("touchmove", function() {
    return false;
});

$(function() {
    //$("#hpane").scrollpane();

    $("#hpane").scrollpane({
        // onscroll: function(pos, page, duration) {
        //     $("#pos").text(pos);
        //     $("#page").text(page);
        //     $("#snapping").text("no");
        // },
        onscrollfinish: function(pos, page) {
            $("#pos").text(pos);
            $("#page").text(page);
            $("#snapping").text("yes");
            $("ul.pager li").removeClass("active")
            $("ul.pager li:nth-child("+(page+1)+")").addClass("active");
        }
    });

    $("ul.pager li").click(function() {
        var index = $(this).index();
        $("ul.pager li").removeClass("active")
        $(this).addClass("active");

        $("#hpane").showpage(index);
        //$("#vpane").showpage(index);
    });

    // $("input").click(function() {
    //     alert(this.value);
    // });
});
});