如何在内容滑动时自动滚动到菜单

Question

当我向左或向右滑动内容时，我需要自动滚动菜单，例如。 当我向右滑动并进入第5个面板滑动时，导航应跳转到或滚动到第5个菜单，但现在它停留或显示在菜单1或仅显示最后一个菜单。

我的期望是像这样创造。 https://js.devexpress.com/Demos/WidgetsGallery/Demo/Pivot/Overview/jQuery/iOS/

我希望实现两个方案，但我失败并且每次都出错

1. 如果我将菜单（所选菜单）左侧或中间侧对齐，则它应始终位于屏幕的初始加载位置的左侧或中间侧对齐，当我滑动幻灯片内容时，菜单应该保留或中心对齐，例如。以上链接devexpress

2. 翻译内容时，例如。第5个面板幻灯片，然后菜单应该相对于它滚动

我在这里尝试的是Jquery代码html for reference

$(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);
    // });
});
});