vue动态设置滚动条的样式

<template>
  <div class="scroll-container" :style="scrollbarStyle">
    <div class="scroll-content">
      <!-- 这里是你的内容 -->
      <p>这里是你的内容</p>
      <p style="white-space: nowrap">这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容</p>
      <p>这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
      <p>这里是你的内容</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      horizontalScrollbarTrackWidth: '30',
      horizontalScrollbarTrackColor: 'orange',
      horizontalScrollbarThumbWidth: '15',
      horizontalScrollbarThumbColor: 'blue',
      horizontalScrollbarThumbBorder: '3px solid orange',
      horizontalScrollbarTrackRadius: '6',
      horizontalScrollbarThumbRadius: '6',

      verticalScrollbarTrackWidth: '30',
      verticalScrollbarTrackColor: 'green',
      verticalScrollbarThumbWidth: '5',
      verticalScrollbarThumbColor: "red",
      verticalScrollbarThumbBorder: '3px solid green',
      verticalScrollbarTrackRadius: '6',
      verticalScrollbarThumbRadius: '6',
    };
  },
  computed: {
    scrollbarStyle() {
      return {
        '--horizontal-scrollbar-track-width': this.horizontalScrollbarTrackWidth + 'px',
        '--horizontal-scrollbar-track-color': this.horizontalScrollbarTrackColor,
        '--horizontal-scrollbar-track-radius': this.horizontalScrollbarTrackRadius + 'px',
        '--horizontal-scrollbar-thumb-color': this.horizontalScrollbarThumbColor,
        '--horizontal-scrollbar-thumb-border':  `${(this.horizontalScrollbarTrackWidth - this.horizontalScrollbarThumbWidth) > 0 ? (this.horizontalScrollbarTrackWidth - this.horizontalScrollbarThumbWidth)/2 : 0}px solid ${this.horizontalScrollbarTrackColor}`,
        '--horizontal-scrollbar-thumb-radius': this.horizontalScrollbarThumbRadius + 'px',

        '--vertical-scrollbar-track-width': this.verticalScrollbarTrackWidth + 'px',
        '--vertical-scrollbar-track-color': this.verticalScrollbarTrackColor,
        '--vertical-scrollbar-track-radius': this.verticalScrollbarTrackRadius + 'px',
        '--vertical-scrollbar-thumb-color': this.verticalScrollbarThumbColor,
        '--vertical-scrollbar-thumb-border': `${(this.verticalScrollbarTrackWidth - this.verticalScrollbarThumbWidth) > 0 ? (this.verticalScrollbarTrackWidth - this.verticalScrollbarThumbWidth)/2 : 0}px solid ${this.verticalScrollbarTrackColor}`,
        '--vertical-scrollbar-thumb-radius': this.verticalScrollbarThumbRadius + 'px',
      };
    }
  }
};
</script>

<style>
.scroll-container {
  width: 300px;
  height: 300px;
  overflow: auto;
  /* 使用CSS变量来动态设置滚动条样式 */
  scrollbar-width: auto; /* 默认值，浏览器会根据内容自动决定是否显示滚动条 */
}

.scroll-container::-webkit-scrollbar:horizontal {
  height: var(--horizontal-scrollbar-track-width);
}

.scroll-container::-webkit-scrollbar:vertical {
  width: var(--vertical-scrollbar-track-width);
}

.scroll-container::-webkit-scrollbar-track:vertical {
  background: var(--vertical-scrollbar-track-color);
  border-radius: var(--vertical-scrollbar-track-radius);
}

.scroll-container::-webkit-scrollbar-track:horizontal {
  background: var(--horizontal-scrollbar-track-color);
  border-radius: var(--horizontal-scrollbar-track-radius);
}

/*.scroll-container::-webkit-scrollbar-thumb {*/
/*  background-color: var(--horizontal-scrollbar-thumb-color);*/
/*  border-radius: var(--horizontal-scrollbar-track-radius);*/
/*  border: var(--horizontal-scrollbar-thumb-border);*/
/*}*/

/* 纵向滚动条样式 */
.scroll-container::-webkit-scrollbar-thumb:vertical {
  background-color: var(--vertical-scrollbar-thumb-color);
  border-radius: var(--vertical-scrollbar-thumb-radius);
  border: var(--vertical-scrollbar-thumb-border);
  border-top-width: 0;
  border-bottom-width: 0;
}

/* 横向滚动条样式 */
.scroll-container::-webkit-scrollbar-thumb:horizontal {
  background-color: var(--horizontal-scrollbar-thumb-color);
  border-radius: var(--horizontal-scrollbar-thumb-radius);
  border: var(--horizontal-scrollbar-thumb-border);
  border-left-width: 0;
  border-right-width: 0;
}
.scroll-container::-webkit-scrollbar-corner {
  background: none;
}
</style>