有没有办法让css属性对vuejs @scroll做出反应？

<div class="scroll-container" @scroll="handleScroll">
  <!-- 滚动内容 -->
</div>

data() {
  return {
    scrollPosition: 0, // 滚动位置
    isScrolling: false // 是否正在滚动
  };
},
methods: {
  handleScroll() {
    this.scrollPosition = window.scrollY; // 获取滚动位置
    this.isScrolling = true; // 设置正在滚动的状态

    // 根据滚动位置和其他条件改变CSS属性
    if (this.scrollPosition > 100) {
      // 滚动位置大于100时改变CSS属性
      // 可以使用Vue的响应式数据来控制CSS属性的值
      this.$refs.scrollContainer.style.backgroundColor = 'red';
    } else {
      // 滚动位置小于等于100时恢复CSS属性
      this.$refs.scrollContainer.style.backgroundColor = 'transparent';
    }

    // 停止滚动后将isScrolling状态设置为false
    clearTimeout(this.scrollTimeout);
    this.scrollTimeout = setTimeout(() => {
      this.isScrolling = false;
    }, 100);
  }
}