docs(site): optimize demos scroll behavior

opentiny · Nov 5, 2024 · 0e423cf · 0e423cf
1 parent 109c92e
commit 0e423cf
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 25 deletions.
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
@@ -493,7 +493,7 @@ export default defineComponent({
             })
           }
         }
-      }, 600)
+      }, 0)
     }
 
     // 在singleDemo情况时，才需要滚动示例区域到顶

diff --git a/examples/sites/src/views/components/float-settings.vue b/examples/sites/src/views/components/float-settings.vue
@@ -200,29 +200,18 @@ export default defineComponent({
         const nav = document.querySelector('.nav')
         if (docLayout) {
           docLayout.onscroll = debounce(100, false, () => {
-            const {
-              scrollTop: layoutScrollTop,
-              scrollHeight: layoutScrollHeight,
-              clientHeight: layoutHeight
-            } = docLayout
+            const { scrollTop: layoutScrollTop } = docLayout
             const headerHeight = docLayout.querySelector('header')?.clientHeight || 0
-            const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0
             const footerTop = footer.getBoundingClientRect().top
             const navHeight = nav?.clientHeight || 0
             const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom'))
-            const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight)
 
             state.showBackTop = layoutScrollTop > 500
             state.showSettings = footerTop - navHeight - headerHeight > 220
 
             if (!state.initBottomVal) {
               state.initBottomVal = currSettingsBottom
             }
-            if (footerVisibleHeight > state.initBottomVal - 40) {
-              state.settingsStyle.bottom = `${footerVisibleHeight + 20}px`
-            } else {
-              state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL
-            }
           })
         }
       })
@@ -297,9 +286,10 @@ export default defineComponent({
     border-radius: 12px;
     background-color: #fff;
     cursor: pointer;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
 
     &:hover {
-      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
+      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
 
       .settings-icon {
         color: #191919;

diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
@@ -153,17 +153,6 @@ export default defineComponent({
     )
 
     onMounted(async () => {
-      // 每次切换路由，有锚点则跳转到锚点，否则导航到顶部
-      routerCbDestroy = router.afterEach((to) => {
-        if (to.hash) {
-          const el = document.querySelector(to.hash)
-          if (el) {
-            return el.scrollIntoView()
-          }
-        }
-        state.contentRef.scrollTo({ top: 0, behavior: 'auto' })
-      })
-
       // 刷新后，高亮相应的菜单
       const cmpId = router.currentRoute.value?.params?.cmpId
       if (cmpId) {
-Original file line number
+Diff line change
@@ Expand Up / @@ -493,7 +493,7 @@ export default defineComponent({ @@
                 })
               }
             }
-          }, 600)
+          }, 0)
         }
         // 在singleDemo情况时，才需要滚动示例区域到顶
@@ Expand Down @@