javascript - 如何淡出导航栏的最右侧并向其添加新按钮

Question

我想要我的导航栏上的一个功能，如果我的导航栏的宽度大于其父 div，则淡化它的最右侧并向其添加一个新按钮。类似于 Youtube 的东西。
1- 当导航栏的宽度大于其父 div 时，它看起来像这样:
2- 当 Navbar 的宽度小于其父 div 时，它看起来像这样:

我怎样才能做到这一点？
这也是我的导航栏:

  <template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light pl-4">
      <form class="form-inline" v-for="(genre, index) in genres" :key="index">
        <button class="btn btn-outline-dark m-1" type="button">
          {{ genre }}
        </button>
      </form>
    </nav>
  </template>

  <script>
  export default {
  data() {
    return {
      genres: [
        .
        .
        .
        "REALITY TV",
        "SPORTS",
        "HORROR"
        ]
      };
    }
  };
  </script>

Answer 1

所以，你需要做什么(也是我认为 youtube 正在做的事情):

有一个容器(div)来保留其中的所有按钮，并 overflow hidden ，以禁止滚动。有一个父 div 来容纳容器 div。

在按钮容器的左侧和右侧有两个绝对定位的箭头按钮。

使用 css transform: translateX(0px) 手动滚动容器.

更改 px 的值以在单击这些箭头按钮时进行翻译。

计算容器div的大小，以及父div的大小，计算max、min scroll的值。滚动时确保 translateX 的值保持在范围内以避免过度缩放。还根据这些值显示隐藏箭头按钮。

这是 codesandbox with working demo .
还添加以下代码:

<template>
  <div>
    <nav class="navbar" ref="navbar">
      <div class="left-arrow" v-if="translateX < 0">
        <div class="left-arrow-button" v-on:click="moveLeft">&lt;</div>
      </div>
      <div class="scroll-container" ref="scroll" :style="scrollStyle">
        <div class="btn" v-for="(genre, index) in genres" :key="index">
          {{ genre }}
        </div>
      </div>
      <div class="right-arrow" v-if="translateX > minVal">
        <div class="right-arrow-button" v-on:click="moveRight">&gt;</div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      genres: [
        "GENRE 1",
        "GENRE 2",
        "GENRE 3",
        "GENRE 4",
        "GENRE 5",
        "GENRE 6",
        "GENRE 7",
        "GENRE 8",
        "REALITY TV",
        "SPORTS",
        "HORROR",
      ],
      scrollWidth: 0,
      navbarWidth: 0,
      translateX: 0,
    };
  },
  computed: {
    scrollStyle: function () {
      return {
        transform: `translateX(${this.translateX}px)`,
      };
    },
    minVal: function () {
      return -(this.scrollWidth - this.navbarWidth);
    },
  },
  mounted() {
    this.getScrollWidth();
  },
  methods: {
    getScrollWidth() {
      this.scrollWidth = this.$refs.scroll.clientWidth;
      this.navbarWidth = this.$refs.navbar.clientWidth;
      // console.log(this.scrollWidth, this.navbarWidth);
    },
    moveRight() {
      const newVal = this.translateX - this.navbarWidth / 2;
      this.translateX = Math.max(this.minVal, newVal);
    },
    moveLeft() {
      const newVal = this.translateX + this.navbarWidth / 2;
      this.translateX = Math.min(0, newVal);
    },
  },
};
</script>

<style scoped>
.navbar {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  position: relative;
  /* width: 500px; */
}
.scroll-container {
  display: flex;
}
.btn {
  margin: 0 8px;
  padding: 8px 16px;
  background-color: grey;
  border-radius: 16px;
}
.left-arrow {
  position: absolute;
  left: 0;
  z-index: 1000;
  height: 100%;
  display: flex;
}
.left-arrow::after {
  background: linear-gradient(to right, white 20%, rgba(255, 255, 255, 0) 80%);
  height: 100%;
  width: 50px;
  content: "";
  pointer-events: none;
}
.left-arrow-button {
  display: flex;
  align-items: center;
  background-color: white;
  cursor: pointer;
}
.right-arrow {
  position: absolute;
  right: 0;
  z-index: 1000;
  height: 100%;
  display: flex;
}
.right-arrow::before {
  background: linear-gradient(to left, white 20%, rgba(255, 255, 255, 0) 80%);
  height: 100%;
  width: 50px;
  content: "";
  pointer-events: none;
}
.right-arrow-button {
  display: flex;
  align-items: center;
  background-color: white;
  cursor: pointer;
}
</style>

我使用的是纯 css 和 html 标签，如果您使用 Bootstrap 或类似的东西进行样式设置，您可以轻松地更新代码以使用该样式。
此外，我还没有实现任何动画来使滚动平滑，我认为 youtube 会这样做。为了使答案简短并专注于一个问题，我跳过了它。您可以自己尝试这样做，如果您遇到任何问题，请为此提出单独的问题。