滑动无法实现
页面高度只有设置为100vh才会出现满屏；100%无效； translateY 也无法实现滑动
结构是完全按照视频的脚本写的
.st-scroll,.st-panel{
width:100vw;
height:100vh;
position:relative;
}
.st-scroll{
top:0;
left:0;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
-webkit-backface-visibility:hidden;
-webkit-transition:all 0.6s ease-in-out;
-mos-transition:all 0.6s ease-in-out;
-ms-transition:all 0.6s ease-in-out;
-o-transition:all 0.6s ease-in-out;
-transition:all 0.6s ease-in-out;
}
.st-panel{
background:#fff;
overflow:hidden;
}
#st-control-1:checked ~ .st-scroll{
-webkit-transform:translateY(0%);
-moz-transform:translateY(0%);
-ms-transform:translateY(0%);
-o-transform:translateY(0%);
transform:translateY(0%);
}
#st-control-2:checked ~ .st-scroll{
-webkit-transform:translateY(-100%);
-moz-transform:translateY(-100%);
-ms-transform:translateY(-100%);
-o-transform:translateY(-100%);
transform:translateY(-100%);
}
#st-control-3:checked ~ .st-scroll{
-webkit-transform:translateY(-200%);
-moz-transform:translateY(-200%);
-ms-transform:translateY(-200%);
-o-transform:translateY(-200%);
transform:translateY(-200%);
}
#st-control-4:checked ~ st-scroll{
-webkit-transform:translateY(-300%);
-moz-transform:translateY(-300%);
-ms-transform:translateY(-300%);
-o-transform:translateY(-300%);
transform:translateY(-300%);
}
#st-control-5:checked ~ .st-scroll{
-webkit-transform:translateY(-400%);
-moz-transform:translateY(-400%);
-ms-transform:translateY(-400%);
-o-transform:translateY(-400%);
transform:translateY(-400%);
}
<div class="container">
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1">
<a href="#st-panel-1">classA</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-2">
<a href="#st-panel-1">classB</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-3">
<a href="#st-panel-1">classC</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-4">
<a href="#st-panel-1">classD</a>
<input type="radio" name="radio-set" checked="checked" id="st-control-5">
<a href="#st-panel-1">classE</a>
</div>
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-dese" data-icon="A"></div>
<h2>ClassA</h2>
<p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>
</section>
<section class="st-panel" id="st-panel-2">
<div class="st-dese" data-icon="B"></div>
<h2>ClassB</h2>
<p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>
</section>
<section class="st-panel" id="st-panel-3">
<div class="st-dese" data-icon="C"></div>
<h2>ClassC</h2>
<p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>
</section>
<section class="st-panel" id="st-panel-4">
<div class="st-dese" data-icon="D"></div>
<h2>ClassD</h2>
<p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>
</section>
<section class="st-panel" id="st-panel-5">
<div class="st-dese" data-icon="E"></div>
<h2>ClassE</h2>
<p>尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。</p>
</section>
</div>
</div>
