用js写一个自定义的滚动条

在一些业务场景下，默认滚动条样式不符合业务需求，且用css并不好改，此时需要用js，自己写一个滚动条

滚动条组件 tabScroll.vue

<script>
import { computed, onUpdated, reactive, ref } from "vue";
export default {
  props: {
    tabScrollLeft: {
      type: Number,
      default: () => 0,
    },
  },
  setup(props) {
    const tabScrollLeft = computed(() => {
      return props.tabScrollLeft;
    });

    return {
      tabScrollLeft,
    };
  },
};
</script>

<template>
  <div class="scroll-thumb" id="thumb">
    <div
      class="scroll-slider"
      :style="{
        left: tabScrollLeft * 48 + 'px',
      }"
      ref="scrollElement"
    ></div>
  </div>
</template>

<style lang="scss" scoped>
.scroll-thumb {
  width: 96px;
  height: 4px;
  border-radius: 16px;
  background: #d9d9d9;
  position: relative;
  .scroll-slider {
    position: absolute;
    width: 48px;
    background: #001e8d;
    height: 100%;
    border-radius: 16px;
    // transition: ease 0.1s;
  }
}
</style>

运用到业务组件list.vue中：

<script>
	import tabScroll from '@/components/tabScroll.vue'
	import { ref, defineComponent, onMounted, onUnmounted, reactive } from 'vue'
	import { throttle } from 'underscore'
	export default defineComponent({
		 components: { tabScroll },
	})
	setup() {
	 	const state = reactive({
            isScroll: false,
        })
		const tabScrollLeft = ref(0)
		const scrollListenerHandler = throttle(() => {
            if (window.scrollY > 10) {
                state.isScroll = true
            } else {
                state.isScroll = false
            }
        }, 100)
		const scrollTabListener = () => {
            setTimeout(() => {
                let box = document.querySelector('.van-tabs__nav')
                if (box) {
                    tabScrollLeft.value = box.scrollLeft / 490
                    active.value = store.state.currentTab

                    box.addEventListener('scroll', function (event) {
                        const scrollLeft = event.target.scrollLeft
                        tabScrollLeft.value = scrollLeft / 490
                    })
                }
            }, 100)
        }
         onMounted(() => {
            window.addEventListener('scroll', scrollListenerHandler)
            scrollTabListener()
        })
         onUnmounted(() => {
            window.removeEventListener('scroll', scrollListenerHandler)
        })
        return {
			  tabScrollLeft,
		}
	}
</script>

<template>
	 <van-tabs
            id="goods-type-wrapper"
            class="goods-type-wrapper"
            v-model:active="active"
            color="#001e8d"
            title-active-color="#001e8d"
            @click-tab="onClickTab"
            :class="{ active: state.isScroll, unActive: !state.isScroll }"
        >
            <van-tab v-for="(item, index) in tablists" :name="item.goodsTypeID" :key="item.goodsTypeID">
                <template #title>
                    <div class="goods-type-list">
                        <div class="goods-type-list-icon" :class="{ active: state.isScroll }">
                            <div class="img_box">
                                <img :src="iconList[index]" alt="" />
                            </div>
                        </div>
                        <div class="goods-type-list-name">{{ item.goodsType }}</div>
                    </div>
                </template>
                <div class="no-data" v-if="isNoData">
                    <img src="@/assets/images/bookPage/noDataIcon.png" alt="" />
                    <div>{{ $t('common.noData') }}</div>
                </div>
                <div class="tab-scroll" v-if="!state.isScroll">
                    <tab-scroll :tabScrollLeft="tabScrollLeft"></tab-scroll>
                </div>
            </van-tab>
        </van-tabs>
</template>

.tab-scroll {
    position: fixed;
    top: 128px;
    z-index: 100;
    left: calc(50% - 48px);
}