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

Posted 2023-02-22

【中文标题】如何淡出导航栏的最右侧并向其添加新按钮

【英文标题】：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>

【参考方案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.translateXpx)`,
      ;
    ,
    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 会这样做。为了使答案简短并专注于一个问题，我跳过了它。您可以自己尝试这样做，如果遇到任何问题，请单独提出问题。