如何滚动horizeontal和垂直

Question

我想用bg类修复和水平滚动。 顶部：0;与面板类。 我想要这些滚动。 enter image description here 而且我想这样做。 我怎么解决这个问题？ 我使用skrollr.js

HTML

 <div id="wrapper">
        <div class="panels" style="background-color:deeppink">Panel 1</div>
        <div class="container">
            <div class="bg" style="background-color:red"
                 data-0="transform:translate3d(0%,0%,0); opacity:1"
                 data-5000="transform:translate3d(-100%,0%,0); opacity:0">
            </div>
        </div>
        <div class="panels" style="background-color:orange">Panel 2</div>
    </div>

CSS

div {
    display: inline-block;
}
.panels {
    top: 0px;
    height: 100px;
    width: 10px;
}
.container {
    background-color: black;
    width: 300px;
    height: 200px;
    overflow: hidden;

}
.bg {
    width: 100%;
    height: 300px;
}