css代码

html, body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
overflow:hidden;
}

.Top1 {
width: 100%;
height: 100%;
overflow: auto;
background: #020202;
transform-style: preserve-3d;
transform: translate3d(0,0,0);
transition: all ease 1s;
}

.G {
transform: translate3d(0,-100%,0);
}

.Top2 {
width: 100%;
position: absolute;
height: 5000px;
z-index: -1;
top: 0px;
background: #ffd800;
top: 0px;
overflow: auto;
}

html代码

<div class="Top1"></div>

<div class="Top2">
<h1>44444</h1>
</div>

 js代码

$(".Top1").click(function () {
$('.Top1').addClass("G");
})

我想让Top2的右边出现滚动条并且可以拖动，怎么做