索引组件滚动高亮 ​

<template>
  <div class="h-300px overflow-auto">
    <div v-for="i in 10" :key="i" class="w-full relative">
      <h6 class="w-full bg-blue-500 px-2 py-2 rounded text-sm text-white" style="position: sticky;top: 0;">
        索引行 {{ i }}
      </h6>
      <span
        v-for="j in 15" :key="j"
        class="w-full flex flex-col text-base py-2 last:border-none border-b-2 border-b-red-400 border-b-dashed"
      >
        🎲 第{{ `${i}-${j}` }}项目
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import {  onMounted, ref } from 'vue'

const titleDomOffsetTopArr: number[] = []
const titleArrRef = ref<HTMLDivElement[]>([])
const stickyIndex = ref<number>(1)

const calcTitleDomOffsetTopArr = () => titleArrRef.value.forEach(titleDom => titleDomOffsetTopArr.push(titleDom.offsetTop))

onMounted(() => calcTitleDomOffsetTopArr())

function onScroll(evt: UIEvent) {
  const scrollDom = evt.target as HTMLElement
  if (!scrollDom) return
  const { scrollTop } = scrollDom
  stickyIndex.value = findStickIndex(scrollTop, titleDomOffsetTopArr) as number
}

function findStickIndex(scrollTop: number, offsetTopArr: number[]) {
  /** 二分查找/折半查找 */
  if (scrollTop <= 0) return 1
  let start = 0
  let end = offsetTopArr.length
  let ret: number = end - 1
  while (start <= end) {
    const middle = Math.trunc((start + end) / 2)
    const middlePos = middle === 0 ? 0 : middle - 1
    const offsetTop = offsetTopArr[middlePos]
    if (offsetTop === scrollTop) {
      return middle
    }
    else if (scrollTop < offsetTop) {
      if (ret === undefined || ret > middle)
        ret = middle

      end = middle - 1
    }
    else if (scrollTop > offsetTop) {
      ret = middle
      start = middle + 1
    }
  }
  return ret
}
</script>

<template>
  <div class="relative">
    <div class="css-sticky" @scroll="onScroll">
      <template v-for="i in 10" :key="i">
        <h6
          ref="titleArrRef"
          :class="{ sticky: stickyIndex === i }"
          class="title"
        >
          索引行{{ i }}
        </h6>
        <ul>
          <li v-for="j in 15" :key="j" class="item">
            🎲 第{{ `${i}-${j}` }}项目
          </li>
        </ul>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.css-sticky {
  @apply h-300px w-full overflow-auto;
   /*  24px 是第一个 title 元素的实际高度 */
   padding-top: 24px;

  .title {
    @apply w-full bg-blue-500 px-2 py-2 rounded text-sm text-white;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    .item:last-child {
      border-bottom: none;
    }
  }


  .item {
    @apply w-full flex flex-col text-base py-2;
    @apply border-b-2 border-b-red-400;
    border-bottom-style: dashed
  }

  .sticky {
    position: absolute;
    top: 0;
  }
}
</style>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'


const titleDomOffsetTopArr: number[] = []
const titleArrRef = ref<HTMLDivElement[]>([])
const stickyIndex = ref<number>(1)
// 竖向滚动条宽度
const scrollBarWidth = ref<number>(0)
const JsStickyRef = ref<HTMLElement>()

function calcTitleDomOffsetTopArr() {
  titleArrRef.value.forEach((titleDom) => {
    titleDomOffsetTopArr.push(titleDom.offsetTop)
  })
}

onMounted(() => {
  calcTitleDomOffsetTopArr()
  const JsStickyDom = JsStickyRef.value
  if (!JsStickyDom) return
  calcScrollBarWidth(JsStickyDom)
})

const scrollBarWidthStr = computed<string>(() => `${scrollBarWidth.value}px`)

/** 计算竖向滚动条宽度 */
function calcScrollBarWidth(scrollDom: HTMLElement) {
  const { offsetWidth, clientWidth } = scrollDom
  // 计算滚动条的宽度
  const tmp = offsetWidth - clientWidth
  if (tmp !== scrollBarWidth.value) scrollBarWidth.value = tmp
}

function onScroll(evt: UIEvent) {
  const scrollDom = evt.target as HTMLElement
  if (!scrollDom) return
  calcScrollBarWidth(scrollDom)
  const { scrollTop } = scrollDom
  stickyIndex.value = findStickIndex(scrollTop, titleDomOffsetTopArr) as number
}

function findStickIndex(scrollTop: number, offsetTopArr: number[]) {
  if (scrollTop <= 0) return 1

  let start = 0
  let end = offsetTopArr.length
  let ret: number = end - 1
  while (start <= end) {
    const middle = Math.trunc((start + end) / 2)
    const middlePos = middle === 0 ? 0 : middle - 1
    const offsetTop = offsetTopArr[middlePos]
    if (offsetTop === scrollTop) {
      return middle
    }
    else if (scrollTop < offsetTop) {
      if (ret === undefined || ret > middle)
        ret = middle

      end = middle - 1
    }
    else if (scrollTop > offsetTop) {
      ret = middle
      start = middle + 1
    }
  }
  return ret
}
</script>

<template>
  <div class="relative">
    <div ref="JsStickyRef" class="js-sticky" @scroll="onScroll">
      <template v-for="i in 10" :key="i">
        <template v-if="i <= 3">
          <div ref="titleArrRef" :class="{ sticky: stickyIndex === i }" class="title">
            索引行{{ i }}
          </div>

          <ul>
            <li v-for="j in 3" :key="j" class="item">
              第{{ `${i}-${j}` }}项目
            </li>
          </ul>
        </template>

        <template v-else-if="i >= 7">
          <div ref="titleArrRef" :class="{ sticky: stickyIndex === i }" class="title">
            索引行{{ i }}
          </div>

          <ul>
            <li v-for="j in 2" :key="j" class="item">
              第{{ `${i}-${j}` }}项目
            </li>
          </ul>
        </template>

        <template v-else>
          <div ref="titleArrRef" :class="{ sticky: stickyIndex === i }" class="title">
            索引行{{ i }}
          </div>

          <ul>
            <li v-for="j in 15" :key="j" class="item">
              第{{ `${i}-${j}` }}项目
            </li>
          </ul>
        </template>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.js-sticky {
  @apply h-300px w-full overflow-auto;
  /*  24px 是第一个 title 元素的实际高度 */
  padding-top: 24px;

  .title {
    @apply w-full bg-blue-500 px-2 py-2 rounded text-sm text-white;
  }
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    .item:last-child {
      border-bottom: none;
    }
  }
  .item {
    @apply w-full text-base py-2 last:border-none;
    @apply border-b-2 border-b-red-400;
    border-bottom-style: dashed
  }
  .sticky {
    position: absolute;
    top: 0;
    /* 吸顶元素的宽度为：100% - 滚动条宽度 */
    width: calc(100% - v-bind(scrollBarWidthStr));
  }
}
</style>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'

const titleDomOffsetTopArr: number[] = []
const titleArrRef = ref<HTMLDivElement[]>([])
const JsStickyRef = ref<HTMLElement>()

/** 粘性元素索引号 */
const stickyIndex = ref<number>(1)
/** 竖向滚动条宽度 */
const scrollBarWidth = ref<number>(0)

onMounted(() => {
  /** calcTitleDomOffsetTopArr */
  titleArrRef.value.forEach(titleDom => titleDomOffsetTopArr.push(titleDom.offsetTop))
  const JsStickyDom = JsStickyRef.value
  if (!JsStickyDom) return
  calcScrollBarWidth(JsStickyDom)
})


const scrollBarWidthStr = computed<string>(() => `${scrollBarWidth.value}px`)

/** 计算竖向滚动条宽度 */
function calcScrollBarWidth(scrollDom: HTMLElement) {
  const { offsetWidth, clientWidth } = scrollDom
  // 计算滚动条的宽度
  const tmp = offsetWidth - clientWidth
  if (tmp !== scrollBarWidth.value)
    scrollBarWidth.value = tmp
}
function onScroll(evt: UIEvent) {
  const scrollDom = evt.target as HTMLElement
  if (!scrollDom) return
  calcScrollBarWidth(scrollDom)
  const { scrollTop } = scrollDom
  stickyIndex.value = findStickIndex(scrollTop, titleDomOffsetTopArr) as number
}

function findStickIndex(scrollTop: number, offsetTopArr: number[]) {
  // 二分查找/折半查找
  if (scrollTop <= 0) return 1
  let start = 0
  let end = offsetTopArr.length
  let ret: number = end - 1
  while (start <= end) {
    const middle = Math.trunc((start + end) / 2)
    const middlePos = middle === 0 ? 0 : middle - 1
    const offsetTop = offsetTopArr[middlePos]
    if (offsetTop === scrollTop) {
      return middle
    }
    else if (scrollTop < offsetTop) {
      if (ret === undefined || ret > middle)
        ret = middle

      end = middle - 1
    }
    else if (scrollTop > offsetTop) {
      ret = middle
      start = middle + 1
    }
  }
  return ret
}
</script>

<template>
  <div class="flex h-300px">
    <div class="index_list">
      <div v-for="i in 26" :key="i" class="index_item">
        索引行{{ i }}
      </div>
    </div>
    <div class="w-[0] flex-1 relative">
      <div ref="JsStickyRef" class="js-sticky" @scroll="onScroll">
        <template v-for="i in 10" :key="i">
          <template v-if="i <= 3">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul>
              <li v-for="j in 3" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </li>
            </ul>
          </template>
          <template v-else-if="i >= 7">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul class="projects">
              <li v-for="j in 2" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </li>
            </ul>
          </template>
          <template v-else>
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul class="projects">
              <li v-for="j in 15" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </li>
            </ul>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index_list {
  @apply relative w-90px flex-shrink-0 overflow-auto flex flex-col text-center;
}

.index_item {
  @apply py-10px border border-b-red-400 last:border-none;
  border-bottom-style: dashed;
}

.js-sticky {
  @apply h-300px w-full overflow-auto;
  /*  24px 是第一个 title 元素的实际高度 */
  padding-top: 24px;

  .title {
    @apply w-full bg-gray-300 px-2 py-1 rounded text-sm;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    .item:last-child {
      border-bottom: none;
    }
  }

  .item {
    @apply w-full text-base py-2 mt-0;
    @apply border-b-1 border-b-red-400;
    border-bottom-style: dashed;
  }

  .sticky {
    position: absolute;
    top: 0;
    /* 吸顶元素的宽度为：100% - 滚动条宽度 */
    width: calc(100% - v-bind(scrollBarWidthStr));
  }
}
</style>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'

const titleDomOffsetTopArr: number[] = []
const titleArrRef = ref<HTMLDivElement[]>([])
const JsStickyRef = ref<HTMLElement>()

/** 粘性元素索引号 */
const stickyIndex = ref<number>(1)
/** 竖向滚动条宽度 */
const scrollBarWidth = ref<number>(0)
/** 高亮元素索引号 */
const highlightIndex = ref<number>(1)

onMounted(() => {
  /** calcTitleDomOffsetTopArr */
  titleArrRef.value.forEach(titleDom =>  titleDomOffsetTopArr.push(titleDom.offsetTop))
  const JsStickyDom = JsStickyRef.value
  if (!JsStickyDom) return
  calcScrollBarWidth(JsStickyDom)
})

const scrollBarWidthStr = computed<string>(() => `${scrollBarWidth.value}px`)

/** 计算竖向滚动条宽度 */
function calcScrollBarWidth(scrollDom: HTMLElement) {
  const { offsetWidth, clientWidth } = scrollDom
  /* 计算滚动条的宽度 */
  const tmp = offsetWidth - clientWidth
  if (tmp !== scrollBarWidth.value) scrollBarWidth.value = tmp
}

function onScroll(evt: UIEvent) {
  const scrollDom = evt.target as HTMLElement
  if (!scrollDom) return
  calcScrollBarWidth(scrollDom)
  const { scrollTop } = scrollDom
  /* 粘性元素索引号 */
  stickyIndex.value = findStickIndex(scrollTop, titleDomOffsetTopArr)
  /* 高亮元素索引号 */
  highlightIndex.value = findStickIndex(scrollTop, titleDomOffsetTopArr) as number
}

/* MARK: 当前高亮索引号和粘性元素索引号查找实现逻辑是一致的 */
function findStickIndex(scrollTop: number, offsetTopArr: number[]) {
  // 二分查找/折半查找
  if (scrollTop <= 0) return 1
  let start = 0
  let end = offsetTopArr.length
  let ret: number = end - 1
  while (start <= end) {
    const middle = Math.trunc((start + end) / 2)
    const middlePos = middle === 0 ? 0 : middle - 1
    const offsetTop = offsetTopArr[middlePos]
    if (offsetTop === scrollTop) {
      return middle
    }
    else if (scrollTop < offsetTop) {
      if (ret === undefined || ret > middle)
        ret = middle
      end = middle - 1
    }
    else if (scrollTop > offsetTop) {
      ret = middle
      start = middle + 1
    }
  }
  return ret
}
</script>

<template>
  <div class="flex h-300px">
    <div class="index_list">
      <div
        v-for="i in 26" :key="i"
        class="index_item"
        :class="{ 'text-green': highlightIndex === i }"
      >
        索引行{{ i }}
      </div>
    </div>
    <div class="w-[0] flex-1 relative">
      <div ref="JsStickyRef" class="js-sticky" @scroll="onScroll">
        <template v-for="i in 26" :key="i">
          <template v-if="i <= 3">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul>
              <div v-for="j in 3" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
          <template v-else-if="i >= 7">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>

            <ul>
              <div v-for="j in 2" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
          <template v-else>
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>

            <ul>
              <div v-for="j in 15" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index_list {
  @apply relative w-90px flex-shrink-0 overflow-auto flex flex-col text-center;
}

.index_item {
  @apply py-10px border border-b-red-400;
  border-bottom-style: dashed;
}

.js-sticky {
  @apply h-300px w-full overflow-auto;
  /*  24px 是第一个 title 元素的实际高度 */
  padding-top: 24px;

  .title {
    @apply w-full bg-gray-300 px-2 py-1 rounded text-sm ;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    .item:last-child {
      border-bottom: none;
    }
  }


  .item {
    @apply w-full text-base py-2;
    @apply border-b-1 border-b-red-400;
    border-bottom-style: dashed;
  }

  &:last-of-type{
    .index_item{
      border-bottom: none;
    }
  }

  .sticky {
    position: absolute;
    top: 0;
    /* 吸顶元素的宽度为：100% - 滚动条宽度 */
    width: calc(100% - v-bind(scrollBarWidthStr));
  }
}
</style>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { debounce, throttle } from 'lodash-es'

const titleDomOffsetTopArr: number[] = []
const titleArrRef = ref<HTMLDivElement[]>([])
const JsStickyRef = ref<HTMLElement>()

/** 粘性元素索引号 */
const stickyIndex = ref<number>(1)
/** 竖向滚动条宽度 */
const scrollBarWidth = ref<number>(0)
/** 高亮元素索引号 */
const highlightIndex = ref<number>(1)
/** 滚动事件函数是否需要根据滚动位置更新高亮索引号 */
let scrollNeedUpdateHighlightIndex = true

onMounted(() => {
  /**  calcTitleDomOffsetTopArr  */
  titleArrRef.value.forEach(titleDom => titleDomOffsetTopArr.push(titleDom.offsetTop))

  const JsStickyDom = JsStickyRef.value
  if (!JsStickyDom) return
  calcScrollBarWidth(JsStickyDom)
})

const scrollBarWidthStr = computed<string>(() => `${scrollBarWidth.value}px`)

/** 计算竖向滚动条宽度 */
function calcScrollBarWidth(scrollDom: HTMLElement) {
  const { offsetWidth, clientWidth } = scrollDom
  /* 计算滚动条的宽度 */
  const tmp = offsetWidth - clientWidth
  if (tmp !== scrollBarWidth.value) scrollBarWidth.value = tmp
}

const updateScrollNeedUpdateHighlightIndexToTrue = () => scrollNeedUpdateHighlightIndex = true

/**
 * 用于在滚动结束后，将scrollNeedUpdateHighlightIndex设置为true
 * 这两个参数是用于指定回调函数updateScrollNeedUpdateHighlightIndexToTrue在timeout结束时才调用
 * trailing: true,
   leading: false,
 */
const updateHighlightIndexDebounce = debounce(updateScrollNeedUpdateHighlightIndexToTrue, 100, {
  trailing: true,
  leading: false,
})

function updateHighlightIndex(scrollTop: number, offsetTopArr: number[]) {
  highlightIndex.value = findStickIndex(scrollTop, offsetTopArr) as number
}

/** 这里是用于实现无论滚动多块，都按照每300毫秒更新一次高亮索引号 */
const updateHighlightIndexThrottle = throttle(updateHighlightIndex, 300, {
  trailing: true,
  leading: false,
})

function onScroll(evt: UIEvent) {
  const scrollDom = evt.target as HTMLElement
  if (!scrollDom) return
  calcScrollBarWidth(scrollDom)

  const { scrollTop } = scrollDom
  stickyIndex.value = findStickIndex(scrollTop, titleDomOffsetTopArr)

  if (scrollNeedUpdateHighlightIndex)
    updateHighlightIndexThrottle(scrollTop, titleDomOffsetTopArr)
  else
    updateHighlightIndexDebounce()
}

/* 当前高亮索引号和粘性元素索引号查找实现逻辑是一致的 */
function findStickIndex(scrollTop: number, offsetTopArr: number[]) {
  // 二分查找/折半查找
  if (scrollTop <= 0) return 1
  let start = 0
  let end = offsetTopArr.length
  let ret: number = end - 1
  while (start <= end) {
    const middle = Math.trunc((start + end) / 2)
    const middlePos = middle === 0 ? 0 : middle - 1
    const offsetTop = offsetTopArr[middlePos]
    if (offsetTop === scrollTop) {
      return middle
    }
    else if (scrollTop < offsetTop) {
      if (ret === undefined || ret > middle)
        ret = middle
      end = middle - 1
    }
    else if (scrollTop > offsetTop) {
      ret = middle
      start = middle + 1
    }
  }
  return ret
}

function onClick(idx: number) {
  const JsStickyDom = JsStickyRef.value
  if (!JsStickyDom) return
  const offsetTop = titleDomOffsetTopArr[idx]
  if (titleDomOffsetTopArr[idx] !== undefined) {
    scrollNeedUpdateHighlightIndex = false
    highlightIndex.value = idx + 1
    JsStickyDom.scrollTo({ top: offsetTop, behavior: 'smooth' })
  }
}
</script>

<template>
  <div class="flex h-300px">
    <div class="index_list">
      <div
        v-for="i in 26" :key="i" class="index_item" :class="{ 'text-green': highlightIndex === i }"
        @click="onClick(i - 1)"
      >
        索引行{{ i }}
      </div>
    </div>
    <div class="w-[0] flex-1 relative">
      <div ref="JsStickyRef" class="js-sticky" @scroll="onScroll">
        <template v-for="i in 26" :key="i">
          <template v-if="i <= 3">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul>
              <div v-for="j in 3" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
          <template v-else-if="i >= 7">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>

            <ul>
              <div v-for="j in 2" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
          <template v-else>
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul>
              <div v-for="j in 15" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index_list {
  @apply relative w-90px flex-shrink-0 overflow-auto flex flex-col text-center;
}

.index_item {
  @apply py-10px border border-b-red-400;
  border-bottom-style: dashed;
}

.js-sticky {
  @apply h-300px w-full overflow-auto;
  /*  24px 是第一个 title 元素的实际高度 */
  padding-top: 24px;

  .title {
    @apply w-full bg-gray-300 px-2 py-1 rounded text-sm;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    .item:last-child {
      border-bottom: none;
    }
  }

  .item {
    @apply w-full text-base py-2 last:border-none;
    @apply border-b-1 border-b-red-400;
    border-bottom-style: dashed;
  }

  .sticky {
    position: absolute;
    top: 0;
    /* 吸顶元素的宽度为：100% - 滚动条宽度 */
    width: calc(100% - v-bind(scrollBarWidthStr));
  }
}
</style>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { debounce, throttle } from 'lodash-es'

const titleDomOffsetTopArr: number[] = []
const titleArrRef = ref<HTMLDivElement[]>([])
const JsStickyRef = ref<HTMLElement>()

/** 粘性元素索引号 */
const stickyIndex = ref<number>(1)
/** 竖向滚动条宽度 */
const scrollBarWidth = ref<number>(0)
/** 高亮元素索引号 */
const highlightIndex = ref<number>(1)

const indexRef = ref<HTMLElement>()
const indexArrRef = ref<HTMLDivElement[]>([])
const indexDomOffsetTopArr: number[] = []

/** 滚动事件函数是否需要根据滚动位置更新高亮索引号 */
let scrollNeedUpdateHighlightIndex = true

onMounted(() => {
  /** calcTitleDomOffsetTopArr  */
  indexArrRef.value.forEach(indexDom => indexDomOffsetTopArr.push(indexDom.offsetTop))
  /** calcIndexDomOffsetTopArr  */
  titleArrRef.value.forEach(titleDom => titleDomOffsetTopArr.push(titleDom.offsetTop))

  const JsStickyDom = JsStickyRef.value
  if (!JsStickyDom) return
  calcScrollBarWidth(JsStickyDom)
})

const scrollBarWidthStr = computed<string>(() => `${scrollBarWidth.value}px`)

/** 计算竖向滚动条宽度 */
function calcScrollBarWidth(scrollDom: HTMLElement) {
  const { offsetWidth, clientWidth } = scrollDom
  /* 计算滚动条的宽度 */
  const tmp = offsetWidth - clientWidth
  if (tmp !== scrollBarWidth.value) scrollBarWidth.value = tmp
}

const updateScrollNeedUpdateHighlightIndexToTrue = () => scrollNeedUpdateHighlightIndex = true

/**
 * 用于在滚动结束后，将 scrollNeedUpdateHighlightIndex 设置为true
 * 这两个参数是用于指定回调函数updateScrollNeedUpdateHighlightIndexToTrue在timeout结束时才调用
 * trailing: true,
   leading: false,
 */
const updateHighlightIndexDebounce = debounce(updateScrollNeedUpdateHighlightIndexToTrue, 100, {
  trailing: true,
  leading: false,
})

function updateHighlightIndex(scrollTop: number, offsetTopArr: number[]) {

  highlightIndex.value = findStickIndex(scrollTop, offsetTopArr) as number
  // 这里减一是因为界面数据的索引号是从1开始，而这里要取数组中的数据，数组下标从0开始，因此要减1
  let indexDomOffsetTop = indexDomOffsetTopArr[highlightIndex.value - 1]

  if (indexDomOffsetTop !== undefined) {
    indexDomOffsetTop = indexDomOffsetTop - 60
    indexDomOffsetTop = indexDomOffsetTop < 0 ? 0 : indexDomOffsetTop
    indexRef.value?.scrollTo({ top: indexDomOffsetTop, behavior: 'smooth' })
  }
}

/** 这里是用于实现无论滚动多块，都按照每300毫秒更新一次高亮索引号 */
const updateHighlightIndexThrottle = throttle(updateHighlightIndex, 300, {
  trailing: true,
  leading: false,
})

function onScroll(evt: UIEvent) {
  const scrollDom = evt.target as HTMLElement
  if (!scrollDom) return
  calcScrollBarWidth(scrollDom)

  const { scrollTop } = scrollDom
  stickyIndex.value = findStickIndex(scrollTop, titleDomOffsetTopArr)

  if (scrollNeedUpdateHighlightIndex) updateHighlightIndexThrottle(scrollTop, titleDomOffsetTopArr)
  else updateHighlightIndexDebounce()
}

/** 当前高亮索引号和粘性元素索引号查找实现逻辑是一致的 */
function findStickIndex(scrollTop: number, offsetTopArr: number[]) {
  // 二分查找/折半查找
  if (scrollTop <= 0) return 1

  let start = 0
  let end = offsetTopArr.length
  let ret: number = end - 1

  while (start <= end) {
    const middle = Math.trunc((start + end) / 2)
    const middlePos = middle === 0 ? 0 : middle - 1
    const offsetTop = offsetTopArr[middlePos]
    if (offsetTop === scrollTop) {
      return middle
    }
    else if (scrollTop < offsetTop) {
      if (ret === undefined || ret > middle)
        ret = middle
      end = middle - 1
    }
    else if (scrollTop > offsetTop) {
      ret = middle
      start = middle + 1
    }
  }
  return ret
}

function onClick(idx: number) {
  const JsStickyDom = JsStickyRef.value
  if (!JsStickyDom) return

  const offsetTop = titleDomOffsetTopArr[idx]
  if (titleDomOffsetTopArr[idx] !== undefined) {
    scrollNeedUpdateHighlightIndex = false
    highlightIndex.value = idx + 1
    JsStickyDom.scrollTo({ top: offsetTop, behavior: 'smooth' })
  }
}
</script>

<template>
  <div class="flex h-300px">
    <div ref="indexRef" class="index_list">
      <div
        v-for="i in 26" :key="i" ref="indexArrRef" class="index_item" :class="{ 'text-green': highlightIndex === i }"
        @click="onClick(i - 1)"
      >
        索引行{{ i }}
      </div>
    </div>
    <div class="w-[0] flex-1 relative">
      <div ref="JsStickyRef" class="js-sticky" @scroll="onScroll">
        <template v-for="i in 26" :key="i">
          <template v-if="i <= 3">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul>
              <li v-for="j in 3" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </li>
            </ul>
          </template>
          <template v-else-if="i >= 7">
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul>
              <div v-for="j in 2" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
          <template v-else>
            <div ref="titleArrRef" class="title" :class="{ sticky: stickyIndex === i }">
              索引行{{ i }}
            </div>
            <ul>
              <div v-for="j in 15" :key="j" class="item">
                第{{ `${i}-${j}` }}项目
              </div>
            </ul>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.index_list {
  @apply relative w-90px flex-shrink-0 overflow-auto flex flex-col text-center;
}

.index_item {
  @apply py-10px border border-b-red-400 last:border-none;
  border-bottom-style: dashed;
}

.js-sticky {
  @apply h-300px w-full overflow-auto;
  /*  24px 是第一个 title 元素的实际高度 */
  padding-top: 24px;

  .title {
    @apply w-full bg-gray-300 px-2 py-1 rounded text-sm;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    .item:last-child {
      border-bottom: none;
    }
  }


  .item {
    @apply w-full text-base py-2 last:border-none;
    @apply border-b-1 border-b-red-400;
    border-bottom-style: dashed;
  }

  .sticky {
    position: absolute;
    top: 0;
    /* 吸顶元素的宽度为：100% - 滚动条宽度 */
    width: calc(100% - v-bind(scrollBarWidthStr));
  }
}
</style>