主页 / 问题 / 965574
Accepted
corocoto
Asked:2020-04-04 23:55:57 +0000 UTC2020-04-04 23:55:57 +0000 UTC

更改滚动状态

  • 772

该项目有几个部分。其中一个看起来像这样：

在此处输入图像描述

问题是这样的。滚动此部分时，它必须更改其状态（即 have position:fixed，但 its min-height: 1470px）。而且所有点都应该到达漏斗并顺利消失（不管它们的数量）。此外，这个块必须是完全自适应的。

javascript

1 个回答

  1. Best Answer

    再摆弄一点之后，我自己解决了这个问题:) 解决方案如下所示：

    const scroll = document.querySelector('.list-tools'),
  content = document.querySelectorAll('.scroll-content div');
let itemsCount = content.length - 1;

content.forEach((value, index) => {
  value.style.position = 'absolute';
  value.style.top = 0;
  value.style.width = '100%';
  value.style.height = '100px';
  value.style.opacity = 0;
  value.style.transition = 'all .4s ease-in';
  if (index == content.length - 1) {
    value.style.opacity = 1;
  }
});

scroll.addEventListener('mousewheel', onWheel);


function onWheel(e) {
  let delta = e.deltaY;
  if (delta > 0) {
    //при скролле вниз
    itemsCount--;
    let copyThisLength = -1;
    if (itemsCount >= 0) {
      copyThisLength = itemsCount;
      content[copyThisLength].style.opacity = 1;
    }
    while (copyThisLength < content.length - 1) {
      content[copyThisLength + 1].style.top = `${parseInt(content[copyThisLength+1].style.top) + delta / 1.5}px`;
      copyThisLength++;
    }
  } else {
    //при скролле вверх
    console.log(delta);
  }
  e.preventDefault();
}
    div.list-tools {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 875px;
  /*при задании следующей высоты этот блок идеально доходил до воронки. т.е. это крайняя точка*/
}

div.list-tools_ul {
  position: absolute;
  width: 100%;
  height: 875px;
  overflow: hidden;
}
    <section>
  <div class="list-tools">
    <div class="list-tools_ul">
      <div class="scroll-content">
        <div class="list-tools__item white">Заголовок №1</div>
        <div class="list-tools__item white">Заголовок №2</div>
        <div class="list-tools__item white">Заголовок №3</div>
        <div class="list-tools__item white">Заголовок №4</div>
        <div class="list-tools__item white">Заголовок №5</div>
      </div>
    </div>
  </div>
</section>

    • 0

相关问题