在正文滚动上仅滚动页面部分的右侧部分

Question

我正在用 Vuejs 制作一个网页，我必须将该页面的一部分制作成非常相似的this site's landing page（查看下面的屏幕截图）。

我能够创建类似的布局，但是当用户在 body 上滚动滚动条时，我遇到了滚动此布局的右侧 <div class="col position-relative"> 的问题。

这是我在 Vuejs 中所做的

<!--Other sections of page-->
<template>
<section ref="rainbow" class="suggestion-container section-padding">
  <div class="container h-100">
    <div class="row h-100">
      <div class="col-6 d-flex align-items-center justify-content-end h-100 pull-left">
        <p class="suggestion-label">
          Create your own Stack of
        </p>
      </div>
      <div class="col position-relative">
        <div class="glass top"></div>
        <div v-view="'visible'" ref="stacks" style="transition: 0.3s all ease; transform: translateY(260px)">
          
          <p data-color="rgba(255, 116, 0, 0.7)" class="stack-name">Guitar</p>
          <p data-color="rgba(255, 170, 0, 0.7)" class="stack-name">Gaming Laptop</p>
          <p data-color="rgba(128, 42, 219, 0.7)" class="stack-name">Euro trip</p>
          <p data-color="rgba(255, 79, 123, 0.7)" class="stack-name">Phone for Dad</p>
         
        </div>
        <div class="glass bottom"></div>
      </div>
    </div>
  </div>
</section>
<!--Other sections of page-->
</template>

<script>
// Necessary imports
export default {
  mounted() {
    ...
    window.addEventListener('scroll', this.handleScroll);
  },
  destroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll(e) {
      if (!this.$refs.rainbow) {
        return;
      }

      if (this.$refs.stacks && !this.$refs.stacks?.classList.contains('visible')) {
        return;
      }

      const stacks = this.$refs.stacks;
      const container = this.$refs.rainbow;
      console.log(container.getBoundingClientRect());
      stacks.style.transform = `translateY(-${(container.getBoundingClientRect().top) / 2}px)`;

      const y = stacks.style.transform;
      if (y.includes('260')) {
        // stacks.style.transform = 'translateY(170px)';
        container.style.backgroundColor = stacks.children[0].attributes[0].value;
      } else if (y.includes('170')) {
        // stacks.style.transform = 'translateY(90px)';
        container.style.backgroundColor = stacks.children[1].attributes[0].value;
      } else if (y.includes('90')) {
        // stacks.style.transform = 'translateY(10px)';
        container.style.backgroundColor = stacks.children[2].attributes[0].value;
      }
    },
  },
}
</script>

我试图在 Codepen 上制作一个普通的 CSS（没有 js）版本。如果有帮助，也请检查一下 - https://codepen.io/yashwp5/pen/rNmvLRO

过去 2 天我一直在努力完成这项工作:(。

Answer 1

这里是如何在纯 CSS 中实现的基本思想。要为左侧文本添加视差滚动，您必须使用 JS。

.row-filler {
  height: 25vh;
}

.row-main {
  position: relative;
  padding: 50vh 0;
  background-color: #f7d3d8;
  color: #e57d61;
}
.static {
  position: sticky;
  top: 50vh;
}
.list {
  list-style-type: none;
}

<div class="row-filler"></div>

<div class="row-main">
    <div class="static">
      <div class="static-row-first">Create</div>
      <div class="static-row-last">yourDollar $</div>
    </div>

    <ul class="list">
        <li>ign</li>
        <li>NickelsBack</li>
        <li>ThereWillBeBud</li>
        <li>Rye&Reynolds</li>
        <li>My2Cents</li>
        <li>The6ixCents</li>
        <li>KillsBills</li>
        <li>Million$Baby</li>
        <li>ChequeMate</li>
        <li>SpendrickLamar</li>
        <li>hawnSpendez</li>
        <li>ign</li>
    </ul>
</div>

<div class="row-filler"></div>