我正在构建一个包含完整页面水平和垂直滚动的小站点。查看一个codepen demo here.演示中存在一个错误，'left'和'up'按钮不能正常工作。 '右'和'下'按钮工作正常。我只是一起扔给你看我在说什么（原谅我的内联样式）。添加touchEvents进行导航
首先，我需要合并touchEvents以在移动设备上进行整页滚动工作。如果用户向左，向右，向下或向上滑动，页面应该相应地移动。我仍然在学习JS的基础知识，我不知道从哪开始。
其次，我对我是否在我的JS中使用最佳实践有一些怀疑。首先，我重复了很多。另一方面，我敢肯定，我正在尝试做的事情有一个更简单的方法。如果你能看看我的代码并给我一些建议，我会很感激。谢谢！
1 回答
您需要在CSS中修改这两个：一是
#center.cslide-up {
top: 100vh;
}
#center.cslide-left {
left: 100vw;
}
至于手机，我建议尝试使用：
你可以通过烹饪一个函数来减少代码行数，并像这样调用它：（Make su重新声明全局变量是Panel2）
btnL.addEventListener('click', function() {
swiper("left");
});
btnLBack.addEventListener('click', function() {
swiper("left");
});
function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}
dir其确定它具有方向移动。您可以连接dir与cslide-以移动中心容器。并使用if/else条件来确定哪个面板移动并使用相同的想法。onClick="swiper('direction');"属性面板和按钮仅在需要时才触发它，而不是在脚本中定义事件侦听器。var panel2;
var panelC = document.getElementById('center');
var panelU = document.getElementById('up');
var panelR = document.getElementById('right');
var panelD = document.getElementById('down');
var panelL = document.getElementById('left');
var btnU = document.getElementById('btn-up');
var btnR = document.getElementById('btn-right');
var btnD = document.getElementById('btn-down');
var btnL = document.getElementById('btn-left');
var btnUBack = document.getElementById('btn-up-back');
var btnRBack = document.getElementById('btn-right-back');
var btnDBack = document.getElementById('btn-down-back');
var btnLBack = document.getElementById('btn-left-back');
btnU.addEventListener('click', function() {
swiper("up");
});
btnUBack.addEventListener('click', function() {
swiper("up");
});
btnR.addEventListener('click', function() {
swiper("right");
});
btnRBack.addEventListener('click', function() {
swiper("right");
});
btnD.addEventListener('click', function() {
swiper("down");
});
btnDBack.addEventListener('click', function() {
swiper("down");
});
btnL.addEventListener('click', function() {
swiper("left");
});
btnLBack.addEventListener('click', function() {
swiper("left");
});
function swiper(dir){
panelC.classList.toggle('cslide-'+dir);
if(dir=="up") panel2=panelU;
else if(dir=="right") panel2=panelR;
else if(dir=="left") panel2=panelL;
else if(dir=="down") panel2=panelD;
panel2.classList.toggle('slide-'+dir);
}* {
margin: 0;
padding: 0;
transition: 1.5s ease;
-webkit-transition: 1.5s ease;
overflow: hidden;
background: white;
}
.panel {
width: 100vw;
height: 100vh;
display: block;
position: absolute;
border: 1px solid blue;
}
.btn {
position: absolute;
padding: 16px;
cursor: pointer;
}
#center {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
#center.cslide-up {
top: 100vh;
}
#center.cslide-left {
left: 100vw;
}
#center.cslide-right {
left: -100vw;
}
#center.cslide-down {
top: -100vh;
}
#up {
top: -100vh;
}
#up.slide-up {
top: 0;
}
#right {
right: -100vw;
}
#right.slide-right {
right: 0;
}
#down {
bottom: -100vh;
}
#down.slide-down {
bottom: 0;
}
#left {
left: -100vw
}
#left.slide-left {
left: 0;
}<div class="panel" id="center">
<div class="btn" id="btn-up" style="text-align: center; width: 100%;">
up
div>
<div class="btn" id="btn-right" style="right: 0; top: 50%;">
right
div>
<div class="btn" id="btn-down" style="text-align: center; bottom: 0; width: 100%;">
down
div>
<div class="btn" id="btn-left" style="top: 50%;">
left
div>
div>
<div class="panel" id="up">
<div class="btn" id="btn-up-back" style="bottom: 0; width: 100%; text-align: center;">
back
div>
div>
<div class="panel" id="right">
<div class="btn" id="btn-right-back" style="left: 0; top: 50%;">
back
div>
div>
<div class="panel" id="down">
<div class="btn" id="btn-down-back" style="top: 0; width: 100%; text-align: center;">
back
div>
div>
<div class="panel" id="left">
<div class="btn" id="btn-left-back" style="right: 0; top: 50%;">
back
div>
div>这家伙很懒，还没有设置简介
