快捷導(dǎo)航

使用vue封裝一個自定義樣式的滾動條

更新時間：2023年10月24日 08:25:15 作者：冂島

眾所周知,當(dāng)容器高度固定而內(nèi)容部分高度超出容器高度時,瀏覽器會渲染出一個可以滾動并用于顯示剩余界面的條 -- 滾動條,它可以簡單的樣式修改,但是位置是固定的,無法移動,而我們需要改變位置的時候,它就不能滿足我們的需求了,這時我們可以自己手寫一個

話不多說，步入正題，先創(chuàng)建測試文件，測試手寫滾動條是否可用

// test.vue
<template>
    <div class="scrollLayout">
        <!-- 內(nèi)容 -->
        <div class="content" ref="content" @scroll="scroll">
            <template v-for="i in 30">
                <div style="width: 10rem; text-align: center">{{ i }}</div>
          </template>
        </div>
        <!-- 滾動條 -->
        <div class="scrollBar" ref="scrollBar">
            <div class="slider" :style="sliderStyle"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const content = ref(null); // ref綁定的內(nèi)容元素
const scrollBar = ref(null); // ref綁定的手寫滾動條

const sliderHeight = ref(0); // 滑塊高度
const position = ref(0); // 手寫滾動條的位置
const sliderStyle = ref(`height:${sliderHeight}%;margin-top:${position}px;`);

const contentCH = ref(0); // content盒子高度
const contentSH = ref(0); // content內(nèi)容高度
const scrollBarCH = ref(0); // 滾動條高度
const activeScrollDistance = ref(0); // 內(nèi)容滾動的距離
const contentScrollDistance = ref(0); // 內(nèi)容滾動的距離

onMounted(() => {
  const { clientHeight, scrollHeight } = content.value;
  contentCH.value = clientHeight;
  contentSH.value = scrollHeight;
  scrollBarCH.value = scrollBar.value.clientHeight;
  sliderHeight.value = (clientHeight / scrollHeight) * 100;
  activeScrollDistance.value = scrollBarCH.value - scrollBarCH.value * (sliderHeight.value / 100);
  contentScrollDistance.value = contentSH.value - contentCH.value;
})
// 內(nèi)容滾動時
const scroll = () => {
  const { scrollTop } = content.value;
  position.value = (scrollTop * activeScrollDistance.value) / contentScrollDistance.value; // 滑塊需要滑動的距離
};
</script>

<style scoped>
.scrollLayout {
    position: relative;
    padding: 1rem;
    font-size: 1rem;
}

.content {
    height: 20rem;
    overflow: auto;
    background: skyblue;
}

.scrollBar {
    position: absolute;
    top: 0;
    right: 1rem;
    width: 5px; /* 滾動條的寬度 */
    height: 18rem; /* 滾動條的高度 */
    background-color: pink; /* 滾動條的顏色 */

}
.slider {
    width: 100%;
    background-color: palevioletred; /* 滑塊的顏色 */
    border-radius: 0.5rem; /* 滑塊圓角 */
}
</style>

獲取元素的 clientHeight 和 scrollHeight 來計算滑塊的高度以及可滾動距離，通過scrollTop獲取滾動的距離通過 scroll 事件來監(jiān)聽內(nèi)容的滾動，從而實現(xiàn)一個簡單的手搓滾動條，下面開始封裝。

封裝前還要考慮到的問題：可否在同一頁面多次復(fù)用；內(nèi)容容器一般都是調(diào)接口數(shù)據(jù)進行遍歷渲染，而v-for在渲染每個條目時是逐個插入到DOM中的，這說明vue會先創(chuàng)建一個空的父元素，并將每個條目插入到該父元素中，這意味著通過用ref綁定父頁面的內(nèi)容容器provide給子組件，子組件inject到dom元素的scrollHeight 這種方法不可行。

我想了一個辦法，父頁面把內(nèi)容通過slot給子組件把接口數(shù)據(jù)父傳子，在子組件可以拿到接口數(shù)據(jù)和內(nèi)容dom的scrollHeight，然后用watch監(jiān)聽props的接口數(shù)據(jù)，若發(fā)生變化，重新獲取scrollHeight即可。

父頁面使用setTimeout模擬接口：

// test.vue
<template>
  <div class="scrollLayout">
    <scroll :data="arrList">
      <template v-for="i in arrList">
        <div style="width: 10rem; text-align: center">num: {{ i.num }}</div>
      </template>
    </scroll>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import scroll from '../components/scroll.vue';

const arrList = ref([]);

setTimeout(() => {
  for (let i = 1; i <= 30; i++) {
    const obj = { num: i < 10 ? '0' + i : i };
    arrList.value.push(obj);
  }
}, 3000);
</script>

<style lang="scss" scoped>
.scrollLayout {
  height: 10rem;
  background: pink;
}
</style>

組件部分：

// scroll.vue
<template>
  <div class="scrollable">
    <div class="content" ref="content" @scroll="scroll">
      <slot></slot>
    </div>
    <div class="scrollBar" ref="scrollBar" :style="scrollBarStyle">
      <div class="slider" :style="sliderStyle"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue';

const props = defineProps({
  scrollColor: {
    type: String,
    default: '',
  },
  sliderColor: {
    type: String,
    default: '#000',
  },
  data: {
    type: Array,
    default: [],
  },
  right: {
    type: String,
    default: '0',
  },
});

const content = ref(null); // ref內(nèi)容
const scrollBar = ref(null); // ref滾動條

const contentCH = ref(0); // content盒子高度
const contentSH = ref(0); // content內(nèi)容高度
const scrollBarCH = ref(0); // 滾動條高度
const activeScrollDistance = ref(0); // 內(nèi)容滾動的距離
const contentScrollDistance = ref(0); // 內(nèi)容滾動的距離
const sliderHeight = ref(0); // 滑塊高度
const position = ref(0); // 滾動條滑動距離
const scrollBarStyle = computed(() => `right:${props.right}px;background:${props.scrollColor};`);
const sliderStyle = computed(() => `height:${sliderHeight.value}%;margin-top:${position.value}px;background:${props.sliderColor};`);

onMounted(() => {
  watch(
    () => props.data,
    () => {
      // nextTick確保在DOM更新完畢后再執(zhí)行
      nextTick(() => {
        const { clientHeight, scrollHeight } = content.value;
        console.log('容器的高度:', clientHeight, '內(nèi)容高度:', scrollHeight);
        contentCH.value = clientHeight;
        contentSH.value = scrollHeight;
        scrollBarCH.value = scrollBar.value.clientHeight;
        sliderHeight.value = (clientHeight / scrollHeight) * 100;
        activeScrollDistance.value = scrollBarCH.value - scrollBarCH.value * (sliderHeight.value / 100);
        contentScrollDistance.value = contentSH.value - contentCH.value;
      });
    },
    { immediate: true, deep: true }
  );
});
// 監(jiān)聽滾動
const scroll = () => {
  const { scrollTop } = content.value;
  position.value = (scrollTop * activeScrollDistance.value) / contentScrollDistance.value;
};
</script>

<style lang="scss" scoped>
.scrollable {
  position: relative;
  display: flex;
  height: 100%;
  overflow: hidden;
}

.content {
  height: 100%;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}
.scrollBar {
  position: absolute;
  top: 0;
  width: 5px;
  height: 100%;
  border-radius: 5px;

  .slider {
    width: 100%;
    border-radius: 3px;
  }
}
</style>

這樣就可以解決初始獲取的scrollHeight是內(nèi)容插入前的高度——即容器高度。

以上就是使用vue封裝一個自定義樣式的滾動條的詳細(xì)內(nèi)容，更多關(guān)于vue封裝滾動條的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: