javascript - 为什么我的函数在工作和非 Javascript 之间交替
问题描述
这是我在这里提出的第一个问题,所以如果我没有遵循正确的指导方针,我会提前道歉。
基本上我想要做的是在 Javascript 中手动编码侧部分导航。导航本身工作得很好,可以向左或向右单击,这些部分将在轮播中无休止地左右滚动。但是,当我尝试将以前的页面设置scrollTop
回0
用户离开该部分时,我遇到了问题。
如果我滚动浏览每个部分并向下滚动一点,当我返回第一页并再次循环浏览它们时,它们似乎会交替显示它们是否scrollTop
实际设置为0
.
HTML正文:
<div class="Arrow" id="arrowLeft"></div>
<div class="Arrow" id="arrowRight"></div>
<section class="Page" id="page1"><div class="PageContent"></div></section>
<section class="Page" id="page2"><div class="PageContent"></div></section>
<section class="Page" id="page3"><div class="PageContent"></div></section>
<section class="Page" id="page4"><div class="PageContent"></div></section>
<section class="Page" id="page5"><div class="PageContent"></div></section>
<section class="Page" id="page6"><div class="PageContent"></div></section>
<section class="Page" id="page7"><div class="PageContent"></div></section>
<section class="Page" id="page8"><div class="PageContent"></div></section>
<script src="JavaScript/scroller.js"></script>
Javascript:
//initialising variables and populating arrays
var currentPage = 0;
var previousPage = 0;
var pages = document.getElementsByClassName("Page");
var sections = [];
for (i=0;i<pages.length;i++) {
sections.push(pages[i]);
}
var pageOffSets = [0, 100, 200, 300, 400, -300, -200, -100];
var zOffSets = [0,-1,-2,-3,-4,-3,-2,-1];
for (i = 0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
//Navigate function
function slidePage(direction) {
previousPage = currentPage;
if (direction=="right") {
currentPage+=1;
if (currentPage>7) {
currentPage = 0;
}
var hold = sections.shift();
sections.push(hold);
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
}
if (direction=="left") {
currentPage-=1;
if (currentPage<0) {
currentPage = 7;
}
var hold = sections.pop();
sections.unshift(hold);
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
}
//!!!
//This is the part that is supposed to set the scrollTop back to 0
//!!!
setTimeout(function(){
sections[previousPage].scrollTop = 0;
}, 1000);
}
//Event listeners for when the user clicks
document.getElementById("arrowLeft").addEventListener("click", function(){
slidePage("left");
});
document.getElementById("arrowRight").addEventListener("click", function(){
slidePage("right");
});
如果有人能指出我做错了什么,我将不胜感激。
编辑:如果需要,这里是 CSS:
body {
overflow-x: hidden;
overflow-y: scroll;
}
section {
width: 100vw;
height: 100vh;
position: fixed;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
overflow: scroll;
}
.Arrow {
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
background-color: black;
top: 48%;
}
.Arrow:hover {
cursor: pointer;
}
#arrowRight {
right: 0;
}
#page1 {
background-color: #c81996;
}
#page2 {
background-color: #64324b;
}
#page3 {
background-color: #1996c8;
}
#page4 {
background-color: #324b64;
}
#page5 {
background-color: #96c819;
}
#page6 {
background-color: #4b6432;
}
#page7 {
background-color: #f0fa1e;
}
#page8 {
background-color: #fa1ef0;
}
.PageContent {
height: 8000px;
width: 90vw;
margin: 5vw;
background-image: -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: linear-gradient(red, yellow);
position: absolute;
}
解决方案
有两个问题:
您正在函数内旋转
sections
数组,因此previousPage
一旦您的匿名函数被触发,索引就不再正确。previousPage
在超时之后设置时引用的变量scrollTop
可以在超时过去之前更改。
最简单的解决方法是旋转pageOffSets
和zOffSets
数组:
if (direction == "right") {
currentPage++;
if (currentPage >= sections.length) {
currentPage = 0;
}
// rotate pageOffsets
{
var x = pageOffSets.pop();
pageOffSets.unshift(x);
}
// rotate zOffsets
{
var x = zOffSets.pop();
zOffSets.unshift(x);
}
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
} else {
currentPage--;
if (currentPage < 0) {
currentPage = sections.length - 1;
}
// rotate pageOffsets
{
var x = pageOffSets.shift();
pageOffSets.push(x);
}
// rotate zOffSets
{
var x = zOffSets.shift();
zOffSets.push(x);
}
for (i=0;i<sections.length;i++) {
sections[i].style.left = pageOffSets[i] + "vw";
sections[i].style.zIndex = zOffSets[i];
}
}
您需要捕获previousPage
变量的副本:
// capture a copy of the index so that it doesn't change
var prev = previousPage;
setTimeout(function() {
sections[prev].scrollTop = 0;
}, 500);
推荐阅读
- operating-system - 没有操作系统的计算机能做什么
- java - 如何编写比较多个参数的比较器?
- javascript - angular6+electron,如何在一台计算机上获取上传文件路径?
- java - 当我单击按钮时,childfragment 不起作用
- c# - 选择具有嵌入文档的过滤值的文档
- c - 以递归方式正确调用显示函数(河内塔)
- javascript - Img 标记(子)的 Span 标记(父)中的引导工具提示无法加载
- python - 使用 pyCharm + Django + Raspberry pi 进行远程部署
- angular - 使用 pipeable 操作员进行测试
- gatt - 向 Movesense pod 添加第二个 GATT 服务