什么？网页点击还能如此丝滑～

执行上下文

发布于 2024-10-23 14:46:23

11000

代码可运行

文章被收录于专栏：执行上下文执行上下文

运行总次数：0

代码可运行

需求

不管在移动端或者 PC 端，当段落内容过长的时候我们都期望有快捷方式能够快速定位到某一段落，省去鼠标滚动的繁琐。

思路

这种效果实现的方式因人而异有多种方式，不管是 Js实现还是 Css 实现无非是看开发者的个人习惯。并没有任何你强他弱的区分，功能实现丝滑、代码易维护就好。

下面是移动端菜单点击滚动到当前菜单和 PC 端定位到当前段落的实现方式。

在移动端有时候有这些的设计效果，比如商品的分类很多，但是设计设计的时候只有一行，左右滚动，那么这时候你点击后面的时候希望在点击的时候自动将点击的菜单移动到视图的中央区域，这样后面被遮挡的菜单可以跟随往前移动。

当然你也可以手动滑动。另外还有个就是从前一个页面带参数进来的时候也可以自动滚动到当前菜单的位置。

HTML代码

<div class="listMenuCont" ref="listMenuCont">
  <div
    class="listMenu"
    ref="listMenu"
    :style="{ width: 225 * mobileMenuData.length + 'px' }"
  >
    <div
      class="listMenuItem"
      :data-id="list.id"
      :class="mobileCurrentId == list.id && 'listMenuCurrent'"
      v-for="list in mobileMenuData"
      @click="mobileMenuClick(list.id)"
    >
      <span>{{ list.name }}特产</span>
    </div>
  </div>
</div>

菜单容器的宽度是当前元素的个数 * 固定宽度。

JS代码

mobileMenuClick(id) {
  const clickedItem = this.$refs.listMenu.querySelector(
    `.listMenuItem[data-id="${id}"]`
  );
  if (clickedItem) {
    const container = this.$refs.listMenuCont;
    const containerWidth = container.clientWidth;
    const itemWidth = clickedItem.offsetWidth;
    const itemOffsetLeft = clickedItem.offsetLeft;
    const scrollLeft = itemOffsetLeft - containerWidth / 2 + itemWidth / 2;
    container.scrollTo({
      left: scrollLeft,
      behavior: "smooth",
    });
  }
}

PC 端在商品详情的时候可能有多个 Tab，但是他不是切换隐藏，而是在同一个页面。这时候点击 tab的时候就希望能够自动定位到当前 tab的位置。

当然如果往下滚动的时候内容过长，我们还希望 tab 能够悬浮在浏览器顶端方便我们点击。

HTML代码

当点击changeIntroduceMenu的时候根据配置的 id 自动线性滑动到对应 id的内容位置。

<div class="webShopIntroduce">
  <div class="webShopIntroduceMenu flex">
    <div
      class="introduceMenu"
      :class="introduceMenuCurrent == list.id && 'introduceMenuCurrent'"
      @click="changeIntroduceMenu(list)"
      v-for="list in introduceMenuData"
    >
      <span>{{ list.name }}</span>
    </div>
  </div>
  <div class="content">
    <div class="imageText" id="imageText">
      <div class="title">图文介绍</div>
    </div>
    <div class="video" id="video">
      <div class="title">宣传视频</div>
    </div>
    <div class="contactUs" id="contactUs">
      <div class="title">联系方式</div>
    </div>
  </div>
</div>

Js代码

changeIntroduceMenu(list) {
 const element = document.getElementById(list.id);
    if (element) {
       element.scrollIntoView({ behavior: 'smooth' });
    }
}