在Vue 3中，你可以通过使用@scroll事件监听元素的滚动事件，并且可以使用Vue的数据绑定机制来实现样式的变化。以下是一个简单的示例：

<template>
  <div
    class="scroll-container"
    @scroll="handleScroll"
    :style="{ backgroundColor: backgroundColor }"
  >
    <!-- 这里放置滚动内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      backgroundColor: 'white', // 初始化背景颜色
    };
  },
  methods: {
    handleScroll(event) {
      // 获取滚动的位置
      const scrollTop = event.target.scrollTop;
      
      // 根据滚动位置修改背景颜色
      if (scrollTop > 100) {
        this.backgroundColor = 'lightblue';
      } else {
        this.backgroundColor = 'white';
      }
    },
  },
};
</script>

<style>
.scroll-container {
  width: 300px;
  height: 300px;
  overflow: auto;
  /* 其他样式可以在这里添加 */
}
</style>

在上面的示例中，我们使用@scroll事件监听滚动事件，然后根据滚动位置修改backgroundColor属性来改变背景颜色。你可以根据需要修改样式变化的逻辑和样式属性。希望这可以帮助你在Vue 3中实现滚动事件和样式变化。