fix: 修复目录定位出现滚动条

IdeaLeap · Feb 19, 2023 · 9ec44bd · 9ec44bd
1 parent 4f6d1e5
commit 9ec44bd
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 26 deletions.
diff --git a/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue b/frontend/components/ArticlesContent/SideBar/Right/Catalogue.vue
@@ -9,9 +9,15 @@ const props = defineProps<{
  * @description: 目录点击事件
  */
 const isActive = shallowRef<number>()
+const heading = ref<HTMLElement[]>([])
+const headerHeight = shallowRef(0)
+
 const activeSelect = (index: number) => {
   if (isActive.value === index)
     return
+  // a标签锚点定位时跳转会出现将元素置最左, 所以用scrollIntoView定位
+  heading.value[index].scrollIntoView()
+  window.scrollBy(0, -headerHeight.value - 30)
   isActive.value = index
 }
 const catalogueClass = (level: number) => {
@@ -34,17 +40,22 @@ const itemOffsetTop = ref<{ key: number; top: number }[]>([])
 const navRef = ref()
 const liRef = ref<HTMLElement[]>([])
 const navMid = shallowRef(0)
-const headerHeight = shallowRef(0)
 const catalogueEleTop = shallowRef(0)
 const currentScrollTop = shallowRef(0)
 
 const getInitByScroll = () => {
+  const articleDom = document.getElementById('markdown-body')
+  const headings = articleDom?.querySelectorAll('h1, h2, h3')
+  headings?.forEach((item: any, i) => {
+    heading.value.push(item)
+  })
+
   navMid.value = navRef.value.clientHeight / 2
   headerHeight.value = document.querySelector('.main-header')!.clientHeight
   catalogueEleTop.value = (document.querySelector('.sticky-block-box') as HTMLElement).offsetTop
   itemOffsetTop.value = []
   props.catalogueList.forEach((val, i) => {
-    const firstHead = document.querySelector(`#heading-${i}`) as HTMLElement
+    const firstHead = heading.value[i]
     if (firstHead) {
       itemOffsetTop.value?.push({
         key: i,
@@ -54,12 +65,11 @@ const getInitByScroll = () => {
   })
 }
 const onScroll = () => {
-  const documentElement = document.documentElement
-  currentScrollTop.value = documentElement.scrollTop
+  currentScrollTop.value = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
   const scrollTop = currentScrollTop.value - headerHeight.value + 20
   const itemOffsetTopLength = itemOffsetTop.value.length
   for (let n = 0; n < itemOffsetTopLength; n++) {
-    if (scrollTop >= itemOffsetTop.value[n].top)
+    if (scrollTop >= itemOffsetTop.value[n].top - headerHeight.value)
       isActive.value = itemOffsetTop.value[n].key
   }
 
@@ -70,7 +80,7 @@ const onScroll = () => {
         top: 0,
       })
       : navRef.value.scrollTo({
-        top: activeEleTop - navMid.value,
+        top: activeEleTop - navMid.value - headerHeight.value,
       })
   }
 }
@@ -99,17 +109,11 @@ const scrollFixedCatalogue = () => {
 }
 
 watch(isNavShown, (val) => {
-  if (val)
-    sideBar?.classList.remove('top')
-  else
-    sideBar?.classList.add('top')
+  val ? sideBar?.classList.remove('top') : sideBar?.classList.add('top')
 })
 
 watch(immerseState, (val) => {
-  if (val)
-    sideBar!.classList.add('sticky')
-  else
-    scrollFixedCatalogue()
+  val ? sideBar!.classList.add('sticky') : scrollFixedCatalogue()
 })
 
 onMounted(() => {
@@ -160,10 +164,6 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-#heading-3 {
-  @apply relative top--50px;
-}
-
 .sidebar-block {
   @apply relative mb-20px;
 }

diff --git a/frontend/components/ArticlesContent/SideBar/Right/index.vue b/frontend/components/ArticlesContent/SideBar/Right/index.vue
@@ -72,7 +72,7 @@ const { immerseState } = useImmerse()
   right: 0;
   width: 25rem;
 }
-.sticky .sticky-block-box {
+.sidebar.sticky .sticky-block-box {
   position: fixed;
   top: 6.766999999999999rem;
   width: inherit;

diff --git a/frontend/components/ArticlesContent/index.vue b/frontend/components/ArticlesContent/index.vue
@@ -27,7 +27,7 @@ function transformToId() {
       for (let i = 0; i < children.length; i++) {
         const tagName = children[i].tagName
         if (tagName === 'H1' || tagName === 'H2' || tagName === 'H3') {
-          children[i].setAttribute('id', `heading-${index}`)
+          children[i].setAttribute('data-id', `heading-${index}`)
           index++
         }
       }

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
@@ -5,3 +5,11 @@
     <AsideSuspensionPanel class="fixed right-3 bottom-1 suspension-panel z-1000" />
   </main>
 </template>
+
+<style scoped>
+@media (max-width: 960px) {
+  .suspension-panel {
+    display: none;
+  }
+}
+</style>
diff --git a/frontend/pages/article/[id].vue b/frontend/pages/article/[id].vue
@@ -79,12 +79,8 @@ onMounted(() => {
     position: relative;
     max-width: 100%;
     box-sizing: border-box;
-  }
-}
-
-@media (max-width: 960px) {
-  .suspension-panel {
-    display: none;
+    padding-left: 2rem;
+    padding-right: 2rem;
   }
 }