how to avoid vertical scrollbar in horizontal slider layout - html

Question

I will try to create a slider(move to left or right), but when I set outer Container(.wrapper) width over 100vw and set the height to 100vh with every child div, It will overflow on vertical, how can I avoid it?
Open the detailed description of the picture
body{
padding : 0;
margin:0;
}
.wrapper {
width : 200vw;
}
.section {
width : 100vw;
height : 100vh;
position:relative;
float:left;
}
.section1 {
background-color : red;
}
.section2{
background-color : yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
if you want to edit with online editor, you can try it
and I don't know why if When I only have one child div(.section), the height doesn't vertical overflow(move up and down)
body{
padding : 0;
margin:0;
}
.wrapper {
width : 100vw;
}
.section {
width : 100vw;
height : 100vh;
position:relative;
float:left;
}
.section1 {
background-color : red;
}
/*
.section2 {
background-color : yellow;
}
*/
<div class="wrapper">
<div class="section section1">1</div>
<!--<div class="section section1">1</div>-->
</div>

Answer 1

Although your question says you're looking to hide the horizontal scrollbar (left and right), your image indicates that you're actually looking to hide the vertical scrollbar (up and down).
You're looking to add overflow-y: hidden to body in order to hide the vertical scrollbar:
body {
padding: 0;
margin: 0;
overflow-y: hidden;
}
.wrapper {
width: 200vw;
}
.section {
width: 100vw;
height: 100vh;
position: relative;
float: left;
}
.section1 {
background-color: red;
}
.section2 {
background-color: yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
Alternatively, if you are indeed looking to hide the horizontal scrollbar, this can be done with overflow-x: hidden, though note that your content won't actually be too tall to escape the bounds vertically with the horizontal scrollbar removed. Setting a height of 110vh demonstrates this working:
body {
padding: 0;
margin: 0;
overflow-x: hidden;
}
.wrapper {
width: 200vw;
}
.section {
width: 100vw;
height: 110vh;
position: relative;
float: left;
}
.section1 {
background-color: red;
}
.section2 {
background-color: yellow;
}
<div class="wrapper">
<div class="section section1">1</div>
<div class="section section2">2</div>
</div>
Hope this helps! :)