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

【问题标题】：How to fade out the very right of a navbar and add a new button to it如何淡出导航栏的最右侧并向其添加新按钮
【发布时间】：2021-06-13 09:24:21
【问题描述】：

我希望我的导航栏上有一个功能，如果我的导航栏的宽度大于其父 div，则淡化它的最右侧并向其添加一个新按钮。类似于 Youtube 的东西。

1- 当 Navbar 的宽度大于其父 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>

【问题讨论】：

标签： javascript html css vue.js bootstrap-4

【解决方案1】：

那么，你需要做什么（也是我认为 youtube 正在做的事情）：

有一个容器（div）来保存所有按钮，隐藏溢出，禁止滚动。有一个父 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 标签，如果您使用引导程序或类似的东西进行样式设置，您可以轻松地更新代码以使用该样式。此外，我还没有实现任何动画来使滚动平滑，我认为 youtube 会这样做。为了使答案简短并专注于一个问题，我跳过了它。您可以自己尝试这样做，如果遇到任何问题，请单独提出问题。

【讨论】：