vue实现滚动条始终悬浮在页面最下方

要实现滚动条始终悬浮在页面最下方，可以通过以下步骤实现：

1. 使用Vue的指令和生命周期方法，在组件重新渲染时监听滚动条位置并更新组件数据。

2. 在组件模板中使用动态绑定的方式，将滚动条的位置作为样式属性值绑定到滚动条组件的外层容器中。

以下是详细的实现步骤和示例：

步骤一：监听滚动条位置并更新组件数据

首先，我们需要在组件的created生命周期方法中初始化一个watcher来监听滚动条位置，并将当前位置存储到组件数据中。这里我们使用的是Vue的scroll事件和window.pageYOffset属性来获取滚动条位置：

export default {
  name: 'ScrollContainer',
  data () {
    return {
      scrollPosition: 0 // 当前滚动条位置
    }
  },
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      this.scrollPosition = window.pageYOffset
    }
  }
}

在组件的mounted生命周期方法中，我们还需要手动触发一次handleScroll方法，以确保初始化时能够正确获取滚动条位置并更新组件数据：

export default {
  name: 'ScrollContainer',
  // ...
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.handleScroll()
  },
  // ...
}

步骤二：使用动态绑定绑定滚动条位置到样式属性

接下来，在组件模板中，我们使用动态绑定的方式将滚动条的位置作为样式属性值绑定到滚动条组件的外层容器中。具体来说，在div容器上使用style属性和transform样式属性来实现：

<template>
  <div
    class="scroll-container"
    :style="'height: ' + height + 'px; transform: translateY(-' + scrollPosition + 'px);'"
  >
    <div class="scroll-bar"></div>
    <slot></slot>
  </div>
</template>

这里，我们使用了组件中的height数据来设置容器的高度，scrollPosition数据作为transform属性的值来控制滚动条位置。然后，我们将滚动条组件的内容放入slot中，以便在使用时可以像普通容器一样添加子组件。

最后，我们还可以在容器中添加一个滚动条组件，通过计算容器高度、滚动条高度和滚动条位置，以及使用transition样式属性实现自动平滑滚动的效果。

示例一：基本滚动条

接下来是一个基本的滚动条示例，用于在容器中显示大量内容，并且始终将滚动条悬浮在页面底部。

<template>
  <div class="scroll-container"
    :style="'height: ' + height + 'px; transform: translateY(-' + scrollPosition + 'px);'"
  >
    <div class="scroll-bar"
      :style="'height: ' + barHeight + 'px; transform: translateY(' + barPosition + 'px);'"
    ></div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollContainer',
  data () {
    return {
      height: 0, // 容器高度
      scrollPosition: 0, // 当前滚动条位置
      barHeight: 0, // 滚动条高度
      barPosition: 0 // 滚动条位置
    }
  },
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.handleScroll()
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      this.height = this.$el.offsetHeight
      this.scrollPosition = window.pageYOffset
      this.barHeight = this.height / (this.$el.scrollHeight / this.height)
      this.barPosition = (this.height - this.barHeight) * (this.scrollPosition / (this.$el.scrollHeight - this.height))
    }
  }
}
</script>

<style>
.scroll-container {
  position: relative;
  overflow: hidden;
}

.scroll-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  transition: .2s linear;
  will-change: transform;
}

.content {
  padding-right: 16px;
}
</style>

示例二：水平滚动条

如果需要在水平方向上显示内容，并将滚动条悬浮在容器最右侧，可以使用scrollLeft属性和clientWidth属性来计算滚动位置和滚动条位置：

<template>
  <div class="scroll-container"
    :style="'width: ' + width + 'px; height: ' + height + 'px; transform: translateX(-' + scrollPosition + 'px);'"
  >
    <div class="scroll-bar"
      :style="'width: ' + barWidth + 'px; transform: translateX(' + barPosition + 'px);'"
    ></div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HorizontalScrollContainer',
  data () {
    return {
      width: 0, // 容器宽度
      height: 0, // 容器高度
      scrollPosition: 0, // 当前滚动条位置
      barWidth: 0, // 滚动条宽度
      barPosition: 0 // 滚动条位置
    }
  },
  created () {
    window.addEventListener('resize', this.handleResize)
  },
  mounted () {
    this.handleResize()
    this.handleScroll()
  },
  destroyed () {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize () {
      this.width = this.$el.offsetWidth
      this.height = this.$el.offsetHeight
    },
    handleScroll () {
      this.barWidth = this.width / (this.$el.scrollWidth / this.width)
      this.barPosition = (this.width - this.barWidth) * (this.$el.scrollLeft / (this.$el.scrollWidth - this.width))
      this.scrollPosition = this.$el.scrollLeft
    }
  }
}
</script>

<style>
.scroll-container {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
}

.scroll-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.3);
  transition: .2s linear;
  will-change: transform;
}

.content {
  white-space: nowrap;
}
</style>