鼠标滚动，页面横向滚动，滑动到某个位置，class添加active

鼠标滚动或页面横向滚动时，当用户滚动到特定位置，通常我们会监听滚动事件（如`onscroll`或`window.onscroll`），然后检查当前滚动位置是否达到预设的条件。如果满足条件，我们会在相应的元素上添加一个名为“active”的CSS类，以此来改变该元素的样式或者显示状态，以便于用户明确看到他们已滚动到的位置。

例如，在JavaScript中，可以这样做：

let element = document.getElementById('scrollTarget'); // 获取需要响应滚动的元素

window.onscroll = function() {
  let windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; // 滚动条位置
  if (element.getBoundingClientRect().top <= windowScrollTop + window.innerHeight / 2) { // 判断元素是否在视口中间区域
    element.classList.add('active');
  } else {
    element.classList.remove('active');
  }
}

在这个例子中，当元素上移至屏幕中央（即滚动条距离元素顶部不超过窗口高度的一半）时，会添加"active"类，离开这个区域则移除该类。

相关问题

vue 微信小程序 实现横向滑动菜单

在 Vue 微信小程序中，可以使用 wx-swiper 实现横向滑动菜单。

1. 在页面的 .vue 文件中，添加以下代码：

<view class="swiper">
  <swiper class="swiper-container" indicator-dots="false" autoplay="false" circular="false">
    <swiper-item class="swiper-item" wx:for="{{list}}" wx:key="index">
      <!-- 每个菜单项的内容 -->
      <view class="menu-item">{{item}}</view>
    </swiper-item>
  </swiper>
</view>

2. 在页面的 .vue 文件中，定义列表数据和样式：

data() {
  return {
    list: ['菜单1', '菜单2', '菜单3', '菜单4', '菜单5', '菜单6', '菜单7', '菜单8', '菜单9'],
    currentIndex: 0
  }
},
methods: {
  // 点击菜单项时触发
  onItemClick(index) {
    this.currentIndex = index
  }
}

.swiper {
  height: 60rpx;
  overflow: hidden;
}

.swiper-container {
  height: 100%;
}

.swiper-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #fff;
  color: #333;
}

.menu-item {
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-bottom: 4rpx solid transparent;
}

.menu-item.active {
  border-bottom-color: #007aff;
}

3. 在菜单项的 view 标签中添加点击事件，并绑定 onItemClick 方法：

<view class="menu-item" :class="{active: currentIndex === index}" @tap="onItemClick(index)">{{item}}</view>

这样就可以实现一个简单的横向滑动菜单了。当用户点击菜单项时，菜单项的样式会变成选中状态。可以根据 currentIndex 属性来判断当前选中的菜单项，从而实现相应的逻辑。

vue实现点击横向导航栏实现导航左右滑动

要实现点击横向导航栏实现导航左右滑动，在Vue中可以使用如下步骤：

1. 在template中定义横向导航栏和导航内容区域：

<template>
  <div class="nav-container">
    <div class="nav-bar">
      <ul>
        <li v-for="(nav, index) in navList" :key="index" @click="handleNavClick(index)" :class="{ active: activeIndex === index }">{{nav}}</li>
      </ul>
    </div>
    <div class="nav-content" ref="navContent">
      <div class="nav-item" v-for="(nav, index) in navList" :key="index">{{nav}}</div>
    </div>
  </div>
</template>

2. 在script中定义data和方法：

<script>
export default {
  data() {
    return {
      navList: ['Nav1', 'Nav2', 'Nav3', 'Nav4'], // 导航栏列表
      activeIndex: 0 // 当前激活的导航栏索引
    }
  },
  methods: {
    // 点击导航栏
    handleNavClick(index) {
      this.activeIndex = index // 更新当前激活的导航栏索引
      const navContent = this.$refs.navContent // 获取导航内容区域
      const navItem = navContent.querySelectorAll('.nav-item')[index] // 获取对应的导航内容项
      navContent.scrollLeft = navItem.offsetLeft - navContent.offsetLeft // 滚动到对应的导航内容项位置
    }
  }
}
</script>

3. 在style中定义样式：

<style scoped>
.nav-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-bar {
  height: 40px;
  line-height: 40px;
  background-color: #f5f5f5;
  overflow-x: auto;
  white-space: nowrap;
}

.nav-bar ul {
  margin: 0;
  padding: 0;
}

.nav-bar li {
  display: inline-block;
  padding: 0 20px;
  font-size: 14px;
  cursor: pointer;
}

.nav-bar li.active {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}

.nav-content {
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
}

.nav-item {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>

这样就可以实现点击横向导航栏实现导航左右滑动了。