chore(scrollbar): 优化Scrollbar Sticky的代码和示例

XiaoMi · Nov 7, 2024 · e2a74f9 · e2a74f9
1 parent 3e4b7af
commit e2a74f9
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 84 deletions.
diff --git a/packages/ui/scrollbar/hi-docs.config.mdx b/packages/ui/scrollbar/hi-docs.config.mdx
@@ -18,9 +18,7 @@
 
 #### Settings
 
-| 参数                      | 说明              | 类型       | 可选值  | 默认值 |
-| ------------------------ | ----------------- | --------- | ------ | ----- |
-| isBottomToScreenBottom   | 开启滚动条吸底 | boolean | true \| false | -      |
-| heightFromBottom         | 滚动条吸底距离 | number  | -             | -      |
-
-> [更多参数](https://github.com/mdbootstrap/perfect-scrollbar/blob/main/types/perfect-scrollbar.d.ts)
+| 参数                        | 说明            | 类型     | 可选值         | 默认值 |
+| -------------------------- | --------------- | ------- | ------------- | ----- |
+| scrollbarXStickToBottom    | 开启横向滚动条吸底 | boolean | true \| false | -     |
+| scrollbarXStickToBottomGap | 横向滚动条吸底间隙 | number  | -             | -     |
diff --git a/packages/ui/scrollbar/src/Scrollbar.tsx b/packages/ui/scrollbar/src/Scrollbar.tsx
@@ -91,7 +91,7 @@ export const Scrollbar = forwardRef<HTMLDivElement | null, ScrollbarProps>(
       () => ({
         instance: ps,
         containerElement: containerElement || undefined,
-        updata: () => {
+        update: () => {
           ps?.update()
         },
       }),

diff --git a/packages/ui/scrollbar/src/types.ts b/packages/ui/scrollbar/src/types.ts
@@ -14,7 +14,7 @@ export interface ScrollbarHelpers {
   /**
    * 更新滚动条
    */
-  updata?: () => void
+  update?: () => void
 }
 
 export type ScrollbarAxesEnum = 'both' | 'x' | 'y' | 'none'
@@ -79,11 +79,11 @@ export type ScrollbarPositionEnum =
  */
 export type Settings = PerfectScrollbar.Options & {
   /**
-   * 开启滚动条吸底
+   * 开启横向滚动条吸底
    */
-  isBottomToScreenBottom?: boolean
+  scrollbarXStickToBottom?: boolean
   /**
-   * 滚动条吸底距离
+   * 横向滚动条吸底间隙
    */
-  heightFromBottom?: number
+  scrollbarXStickToBottomGap?: number
 }
diff --git a/packages/ui/scrollbar/stories/fixed.stories.tsx b/packages/ui/scrollbar/stories/fixed.stories.tsx
diff --git a/packages/ui/scrollbar/stories/index.stories.tsx b/packages/ui/scrollbar/stories/index.stories.tsx
@@ -5,7 +5,7 @@ export * from './basic.stories'
 export * from './axes.stories'
 export * from './config.stories'
 export * from './event.stories'
-export * from './fixed.stories'
+export * from './sticky.stories'
 
 export default {
   title: 'Others/Scrollbar',

diff --git a/packages/ui/scrollbar/stories/sticky.stories.tsx b/packages/ui/scrollbar/stories/sticky.stories.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useEffect } from 'react'
+import Scrollbar, { ScrollbarHelpers } from '../src'
+
+/**
+ * @title 滚动条吸底
+ * @desc 默认不开启，开启后默认在 Scrollbar 组件内部滚动有效，如需外部使用，需要手动调用 update 方法
+ */
+export const Fixed = () => {
+  const innerRef = useRef<ScrollbarHelpers>(null)
+  const update = () => innerRef.current?.update?.()
+
+  // 此处演示在外部使用该效果
+  useEffect(() => {
+    document.addEventListener('scroll', update)
+
+    return () => {
+      document.removeEventListener('scroll', update)
+    }
+  }, [])
+
+  return (
+    <>
+      <h1>滚动条吸底</h1>
+      <div className="scrollbar-sticky__wrap">
+        <Scrollbar
+          innerRef={innerRef}
+          keepVisible
+          style={{
+            height: 400,
+          }}
+          settings={{ scrollbarXStickToBottom: true, scrollbarXStickToBottomGap: 20 }}
+        >
+          <div style={{ height: 640, width: '200%' }}>
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#03A9F433,#03A9F4cc)',
+              }}
+            />
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#00968833,#009688cc)',
+              }}
+            />
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#FF572233,#FF5722cc)',
+              }}
+            />
+            <div
+              style={{
+                height: 160,
+                background: 'linear-gradient(90deg,#E91E6333,#E91E63cc)',
+              }}
+            />
+          </div>
+        </Scrollbar>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/table/stories/scrollbar.stories.tsx b/packages/ui/table/stories/scrollbar.stories.tsx
@@ -354,11 +354,21 @@ export const Scrollbar = () => {
           columns={column}
           data={data}
           maxHeight={300}
-          scrollbar={{
-            keepVisible: true,
-            zIndex: 9,
-            settings: { isBottomToScreenBottom: true, heightFromBottom: 20 },
-          }}
+          scrollbar={
+            // 根据需要进行以下配置
+            {
+              // 保持滚动条始终可见
+              keepVisible: true,
+              // 设置滚动条的 z-index 值
+              zIndex: 9,
+              settings: {
+                // 垂直滑动时，让横向滚动条一直显示在容器底部
+                scrollbarXStickToBottom: true,
+                // 横向滚动条距离底部的距离
+                scrollbarXStickToBottomGap: 20,
+              },
+            }
+          }
         />
       </div>
     </>

diff --git a/patches/perfect-scrollbar+1.5.5.patch b/patches/perfect-scrollbar+1.5.5.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js b/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js
-index 4215b17..119e0da 100644
+index 4215b17..2edc906 100644
 --- a/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js
 +++ b/node_modules/perfect-scrollbar/dist/perfect-scrollbar.esm.js
 @@ -418,6 +418,16 @@ function getThumbSize(i, thumbSize) {
@@ -11,7 +11,7 @@ index 4215b17..119e0da 100644
 +  var elementTop = rect.top;
 +  var elementHeight = element.offsetHeight || element.clientHeight;
 +  var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
-+  viewportHeight -= (i.settings && i.settings.heightFromBottom) || 0;
++  viewportHeight -= (i.settings && i.settings.scrollbarXStickToBottomGap) || 0;
 +  var distance = viewportHeight - (elementTop + elementHeight);
 +  return distance;
 +}
@@ -24,7 +24,7 @@ index 4215b17..119e0da 100644
      xRailOffset.left = element.scrollLeft;
    }
 +  var bottomToScreenBottomDistance = 0
-+  if(i.settings.isBottomToScreenBottom){
++  if(i.settings.scrollbarXStickToBottom){
 +    bottomToScreenBottomDistance = getElementBottomToScreenBottomDistance(
 +      element,
 +      i