Vue CSS滚动时如何在屏幕上移动对象答案

【问题标题】：Vue CSS how to move object across the screen when scrollingVue CSS滚动时如何在屏幕上移动对象
【发布时间】：2021-01-07 12:09:38
【问题描述】：

我有一个项目，我尝试在滚动时将元素从右到左悬停在窗口中。因此，当用户向下滚动时，元素会从右向左移动，而当用户向上滚动时，元素会从左向右移动。

我尝试通过向窗口添加滚动事件侦听器来实现此目的，然后检查该组件何时在浏览器上可见（该组件是在应用程序中显示在彼此下方的多个组件之一）

如果有人知道实现此目的的更好方法，请随时发表评论。我只是想到了使用绝对定位在屏幕上移动对象。

这是我目前正在使用的代码，但它不想工作。对象不动并保持不动。

  data () {
    return {
      position: 0
    }
  },
  created () {
    window.addEventListener('scroll', (event) => {
      this.runOnScroll()
    })
  },
  mounted () {
    const navbar = this.$refs.neonComponent
    this.navbarOffset = navbar.offsetTop
  },
  methods: {
    runOnScroll () {
      if ((this.navbarOffset - 600) < window.pageYOffset) {
        this.position = Math.round((window.pageYOffset - (this.navbarOffset - 600)) / 10)
        this.$refs.neonText.style.right = this.position
      } else {
        if (this.position > 0) this.position = 0
      }
    //   console.log(this.position)
    }
  }

<div ref="neonComponent" class="relative w-full min-h-screen bg-black flex justify-center items-center">
    <div ref="neonText" class="absolute max-w-3xl text-center position-text">
       <h2 class="text-7xl">This is an example text</h2>
    </div>
</div>

【问题讨论】：

标签： javascript css vue.js

【解决方案1】：

尝试在 style.right 中添加一个单位（px、%、vh、vw），如下所示：

        this.$refs.neonText.style.right = this.position + 'px';

【讨论】：