javascript - 以 3 个子 div 为中心，宽度均为 100%？

Question

所以我有一个父 div(100% 宽度)和其中的 3 个子 div(也是 100% 宽度)。我如何将“默认显示的 div”设置为第二个子元素，以便左侧 div 向左离开屏幕，而右侧 div 向右离开屏幕？

here is my code so far .

HTML:

<div id="wrapper">
    <div id="left" class="fixed-container">
        <div id="left-wrap" class="moving">
            <div id="left-prev" class="prev content-container">prev</div>
            <div id="left-next" class="next content-container">next</div>
            <div id="left-cur" class="cur content-container">cur</div>
        </div>
    </div>
    <div id="right" class="fixed-container">
        <div id="right-wrap" class="moving">
            <div id="right-prev" class="prev content-container">prev</div>
            <div id="right-next" class="next content-container">next</div>
            <div id="right-cur" class="cur content-container">cur</div>
        </div>
    </div>
</div>

CSS:

/*RESET*/
html, body {
    margin:0;
    padding:0;
}

/*page wrapper style and layout*/
#wrapper {
    width:100vw;
    height:100vh;
    background:white;
}

/*left and right fixed container
---------------------------------*/

/*STYLES*/
.fixed-container {
    width:50%;
    height:100%;
    position:relative;
    overflow-x:scroll;
}
#left {
    background:#99FF99;
}

/*LAYOUT*/
#left {
    float:left;
}
#right {
    float:right;
}

/*back, current and next div wrapper*/
.moving {
    height:100%;
    width:300%;
    position:absolute;
}

/*back, current and next containers
------------------------------------*/

/*STYLES*/
.content-container {
    height:100%;
    width:33.33%;
}
.next {
    background:#fa342f;
}
.cur {
    background:#a82f33;
}

/*LAYOUT*/
.prev {
    float:left;
}
.next {
    float:right;
}
.cur {
    margin:0px auto;
}

---

基本上我希望左右 div 在页面加载时显示 $(".cur")。我试过使用 scrollTo 插件，但只有左 div 滚动( as seen here )。我将如何实现这一目标？谢谢!

Answer 1

您在 fiddle ( checked here ) 中的函数可以这样修复:

$(document).ready(function(){
    $(".fixed-container").each(
        function(i) {
          $(this).scrollTo($('.cur').eq(i), {axis: "x"});
        }
    );  
});

您只将一个包装器居中，每个包装器都有一个类为“cur”的 div。