滚动显示内容:每天一个功能(3)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52005030/article/details/119779801

本文展示了一个使用 Vue.js 实现的滚动监听示例，通过监听滚动事件来判断元素是否在视口范围内，并应用 CSS 类进行高亮显示。代码中使用了 `v-for` 循环遍历元素列表，结合计算属性 `isShow` 和 `@mousewheel` 事件处理函数，实现了基于元素位置的滚动效果。示例还包含了 CSS 样式以美化布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="center" @mousewheel="scroll">
    <div
      v-for="(item, index) in list"
      :key="index"
      :ref="item"
      class="box"
      :class="isShow > index ? 'show' : ''"
    >
      <h2>{{ item }}</h2>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  data() {
    return {
      list: ["a", "b", "c", "d", "e", "f", "g","a1", "b1", "c1", "d1", "e1", "f1", "g1"],
      isShow: 0,
    };
  },
  methods: {
    scroll() {
      const triggerBottom = (window.innerHeight / 5) * 4;

      this.list.forEach((item, idx) => {
      
        let boxTop = this.$refs[item][0].getBoundingClientRect().top;
        console.log(boxTop, '=====',idx)
        if (boxTop < triggerBottom) {
          this.isShow = idx + 2;
        }
      });
      console.log(triggerBottom, "=====");
    },
  },
  created() {},
  mounted() {
    this.scroll()
  },
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
* {
  box-sizing: border-box;
}

.center {
  background-color: #efedd6;
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow-x: hidden;
 margin-bottom: 230px;
}

h1 {
  margin: 10px;
}

.box {
  background-color: steelblue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  transform: translateX(400%);
  transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
  transform: translateX(-400%);
}

.box.show {
  transform: translateX(0);
}

.box h2 {
  font-size: 45px;
}
</style>