为什么我的功能会在工作和Java脚本之间交替显示

这是我在这里问的第一个问题,因此,如果我没有遵循正确的准则,我会提前道歉。

基本上,我想做的是手动在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,-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;
}
cuiyun0123 回答:为什么我的功能会在工作和Java脚本之间交替显示

有两个问题:

  1. 您正在旋转函数内部的sections数组,因此一旦您的匿名函数被触发,previousPage索引将不再正确。

  2. 在超时后设置previousPage时引用的scrollTop变量可以在超时之前更改。

最简单的解决办法是旋转pageOffSetszOffSets数组:

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);
本文链接:https://www.f2er.com/3166951.html

大家都在问