基于滚动更改内容 position

Question

我正在尝试构建一个Showcase组件，类似于此处看到的组件，用户在滚动时循环浏览不同的内容：

我正在使用一些 CSS 修复该部分：

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

应用于我的 HTML：

  <section
    ref={(r) => this.ref = r}
    className={`vh-500 bg-near-white z-max pv6-ns pv3 bg-near-white min-vh-100
    ...
    `}>
    <div className='sticky top-0 vh-100'>

使用我的 HTML 元素上的ref ，我通过查看scrollY与组件本身的顶部和底部的关系来计算Showcase组件的粘性区域：

  componentDidMount() {
    if (this.ref) {
      this.setState(
        {
          firstThreshold: this.ref.getBoundingClientRect().top,
          secondThreshold: window.innerHeight * amount
        },
        // tslint:disable-next-line:no-console
        () => console.log(this.state, "state")
      );
    }
    window.addEventListener("scroll", this.handleScroll);
  }

然后在我的handleScroll() function 中，我检测到我们何时滚动Showcase组件：

// if we're scrolling through the Showcase component
if (scrollY >= firstThreshold && scrollY <= secondThreshold) {
...
}

现在这是我迷失的一点：

我通过将视口高度乘以要在组件中显示的故事的章节数量来获得组件的高度：

const chapters = [
  {
    content: 'Signs up',
    title: '',
  },
  {
    content: 'Receives request',
    title: '',
  },
  {
    content: 'Gets a shit, rude requests from a person with 0 rating',
    title: '',
  },
  {
    content: 'Blocks them',
    title: '',
  },
  {
    content: 'Gets a nice request from a person who’s rated 5 stars',
    title: '',
  },
  {
    content: 'They agree on terms and accept the request',
    title: '',
  },
  {
    content: 'Time elapses',
    title: '',
  },
  {
    content: 'Thanks them for the time, gives them 5 stars',
    title: '',
  },
]

const amount = chapters.length

在我的handleScroll() function 中，我试图确定在用户滚动时显示哪一章，但我不知道如何到达那里。 这是我现在拥有的：

  for (let i = 0; i < amount; i++) {
    // tslint:disable-next-line:no-console
    console.log(i, "i");
    if (scrollY >= (firstThreshold + sectionThreshold) * i) {
      // tslint:disable-next-line:no-console
      console.log(sectionThreshold * i, "sectionThreshold * i");
      this.setState({ currentChapter: i }, () => {
        // tslint:disable-next-line:no-console
        console.log(
          `scrolling inside section: ${this.state.currentChapter}`
        );
      });
    }
  }

我想要达到的目标：

• 在用户滚动页面时显示每一章

我该怎么做呢？

代码沙盒

Answer 1

所以我设法弄清楚了，我想我之前只是想多了。 基本上在handleScroll(e)内部，您可以获得每个部分的高度：

首先，通过将chapterAmount除以componentHeight来获取章节的高度，并将结果推送到数组中：

const chapterHeights = [];
for (let index = 0; index < chapters.length; index++) {
  const chapterHeight = componentHeight / chapterAmount;
  chapterHeights.push(chapterHeight * index);
}

然后循环遍历chapterHeights数组并与滚动条 position 进行比较，然后设置将在视图中呈现的title和content的 state。

for (let index = 0; index < chapterHeights.length; index++) {
  // console.log(chapterHeights[index], "chapterHeights[index]");
  const chapterLength = chapterHeights[index];

  if (scrollY >= chapterLength) {
    this.setState({
      title: chapters[index].title,
      content: chapters[index].content,
    })
  }
}

代码沙盒在这里