Question

在我以前的https://www.w3schools.com/jsref/met_win_open.asp我请求帮助，在没有框架的情况下滚动Vanilla ES6时修复了一些部分。

简单的HTML结构：

function pinElement() {

  // Reset all styles 
  projects.forEach((project) => {
    document.body.style.paddingTop = 0;
    project.classList.remove('fixed');
  });

  // Get the index of the project that is closest to top
  const valueClosestToScrollY = Math.max.apply(Math, projectsOffsetTop.filter((offsetTop) => offsetTop <= window.scrollY));
  const idx = projectsOffsetTop.indexOf(valueClosestToScrollY);


  // Otherwise, we set the appropriate styles and classes
  if (window.scrollY >= projectsOffsetTop[idx]) {
    document.body.style.paddingTop = `${projectsHeight[idx]}px`;
    projects[idx].classList.add('fixed');
  } 

};

window.addEventListener('scroll', pinElement);

这是完成工作的核心功能：

function updateProjectsOffsetTop() {
  projectsOffsetTop = projects.map(project => project.offsetTop);
  projectsHeight = projects.map(project => project.offsetHeight);
};

window.addEventListener('resize', updateProjectsOffsetTop);

现在我在调整窗口大小时遇到了问题。

当有人调整窗口大小时，我添加了一个事件监听器来更新元素的偏移量和高度值。

const projects = Array.from(document.querySelectorAll('.project'));
    let projectsOffsetTop = projects.map(project => project.offsetTop);
    let projectsHeight = projects.map(project => project.offsetHeight);

    function updateProjectsOffsetTop() {
      projectsOffsetTop = projects.map(project => project.offsetTop);
      projectsHeight = projects.map(project => project.offsetHeight);
    };


    function pinElement() {

      // Reset all styles 
      projects.forEach((project) => {
        document.body.style.paddingTop = 0;
        project.classList.remove('fixed');
      });

      // Get the index of the project that is closest to top
      const valueClosestToScrollY = Math.max.apply(Math, projectsOffsetTop.filter((offsetTop) => offsetTop <= window.scrollY));
      const idx = projectsOffsetTop.indexOf(valueClosestToScrollY);


      // Otherwise, we set the appropriate styles and classes
      if (window.scrollY >= projectsOffsetTop[idx]) {
        document.body.style.paddingTop = `${projectsHeight[idx]}px`;
        projects[idx].classList.add('fixed');
      } 

    };

    window.addEventListener('resize', updateProjectsOffsetTop);
    window.addEventListener('scroll', pinElement);

如果我在开始滚动之前调整窗口大小，这可以正常工作。但是，如果我在启动滚动后调整窗口大小，一切都会破坏。

我无法找到更新实时值并将它们传递给滚动功能的方法。如果有可能的话，我想用Vanilla ES6解决这个代码，因为我正在尝试从该规范开始学习Javascript。

我知道这可能是一个简单的问题，但我在这里要学习：）

提前致谢并找到完整的JS小提琴。

html {
      box-sizing: border-box;
    }

    *, *::before, *::after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }

    header, footer {
      width: 100%;
      padding: 10%;
      background-color: grey;
      position: relative;
    }

    .project {
      width: 100%;
      height: 100vh;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
    }

    #item1 {background-color: yellow;}
    #item2 {background-color: blue;}
    #item3 {background-color: red;}


    .fixed {
      position: fixed;
    }

<header class="forewords"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum soluta ipsam quaerat cupiditate neque, necessitatibus amet nihil perferendis sunt minus! Exercitationem nulla inventore, aut beatae magnam, totam et minus hic.</h1>
  </header>

  <div class="wrapper">
    <section class="project" id="item1">this is section 1</section>
    <section class="project" id="item2">this is section 2</section>
    <section class="project" id="item3">this is section 3</section>
  </div>

  <footer class="endings"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae vel, perferendis ullam totam recusandae sed repellendus cum! Molestiae, aut ut sequi eos quidem nam quo est, ad tempora inventore odit.</h1>
  </footer>

Label1.Text = "<a href='File:///R:\DomainWebs\Intranet\fileups\TravelDocs\" & IncludeFileUpload.FileName & "'>" & IncludeFileUpload.FileName & "</a>"

Answer 1

当您运行updateProjectsOffsetTop并且<section>已设置为position: fixed时，固定元素的offsetTop始终为0。

当您调整大小（滚动后）并获得新的偏移量时，当前fixed的任何元素的偏移量将为零。因此，稍后会破坏valueClosestToScrollY的逻辑。

您只需清除fixed元素，设置偏移，然后重新运行pinElement()，即可解决此问题;

function updateProjectsOffsetTop() {
  projects.forEach((project) => {
    document.body.style.paddingTop = 0;
    project.classList.remove('fixed');
  });
  projectsOffsetTop = projects.map(project => project.offsetTop);
  projectsHeight = projects.map(project => project.offsetHeight);
  pinElement();
};

这可能不是你想要实现的目标，但这就是问题所在。

＆＃13;

const projects = Array.from(document.querySelectorAll('.project'));
    let projectsOffsetTop = projects.map(project => project.offsetTop);
    let projectsHeight = projects.map(project => project.offsetHeight);

    function updateProjectsOffsetTop() {
      projects.forEach((project) => {
        document.body.style.paddingTop = 0;
        project.classList.remove('fixed');
      });
      projectsOffsetTop = projects.map(project => project.offsetTop);
      projectsHeight = projects.map(project => project.offsetHeight);
      pinElement();
    };


    function pinElement() {

      // Reset all styles 
      projects.forEach((project) => {
        document.body.style.paddingTop = 0;
        project.classList.remove('fixed');
      });

      // Get the index of the project that is closest to top
      const valueClosestToScrollY = Math.max.apply(Math, projectsOffsetTop.filter((offsetTop) => offsetTop <= window.scrollY));
      const idx = projectsOffsetTop.indexOf(valueClosestToScrollY);


      // Otherwise, we set the appropriate styles and classes
      if (window.scrollY >= projectsOffsetTop[idx]) {
        document.body.style.paddingTop = `${projectsHeight[idx]}px`;
        projects[idx].classList.add('fixed');
      } 

    };

    window.addEventListener('resize', updateProjectsOffsetTop);
    window.addEventListener('scroll', pinElement);

＆＃13;

html {
      box-sizing: border-box;
    }

    *, *::before, *::after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }

    header, footer {
      width: 100%;
      padding: 10%;
      background-color: grey;
      position: relative;
    }

    .project {
      width: 100%;
      height: 100vh;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      top: 0;
    }

    #item1 {background-color: yellow;}
    #item2 {background-color: blue;}
    #item3 {background-color: red;}


    .fixed {
      position: fixed;
    }

＆＃13;

<header class="forewords"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum soluta ipsam quaerat cupiditate neque, necessitatibus amet nihil perferendis sunt minus! Exercitationem nulla inventore, aut beatae magnam, totam et minus hic.</h1>
  </header>

  <div class="wrapper">
    <section class="project" id="item1">this is section 1</section>
    <section class="project" id="item2">this is section 2</section>
    <section class="project" id="item3">this is section 3</section>
  </div>

  <footer class="endings"><h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae vel, perferendis ullam totam recusandae sed repellendus cum! Molestiae, aut ut sequi eos quidem nam quo est, ad tempora inventore odit.</h1>
  </footer>

＆＃13;

在Javascript ES6中调整窗口问题的大小

1 个答案: