diff --git a/packages/ui/scrollbar/hi-docs.config.mdx b/packages/ui/scrollbar/hi-docs.config.mdx index 5b1756eac..eb7ce0763 100644 --- 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 index 66b0933aa..33e841462 100644 --- a/packages/ui/scrollbar/src/Scrollbar.tsx +++ b/packages/ui/scrollbar/src/Scrollbar.tsx @@ -91,7 +91,7 @@ export const Scrollbar = forwardRef( () => ({ 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 index 5745ad78a..a57d97f4b 100644 --- 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 deleted file mode 100644 index b25dc9e39..000000000 --- a/packages/ui/scrollbar/stories/fixed.stories.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, { useRef, useEffect } from 'react' -import Scrollbar from '../src' - -/** - * @title 滚动条固定到屏幕底部 - * @desc 默认不开启 - */ -export const Fixed = () => { - const innerRef = useRef() - useEffect(() => { - document.addEventListener('scroll', () => { - innerRef.current?.updata() - }) - }, []) - return ( -
- -
-
-
-
-
-
- -
- ) -} diff --git a/packages/ui/scrollbar/stories/index.stories.tsx b/packages/ui/scrollbar/stories/index.stories.tsx index 013ee1024..8952e9b91 100644 --- 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 new file mode 100644 index 000000000..27c6f57d3 --- /dev/null +++ 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(null) + const update = () => innerRef.current?.update?.() + + // 此处演示在外部使用该效果 + useEffect(() => { + document.addEventListener('scroll', update) + + return () => { + document.removeEventListener('scroll', update) + } + }, []) + + return ( + <> +

滚动条吸底

+
+ +
+
+
+
+
+
+ +
+ + ) +} diff --git a/packages/ui/table/stories/scrollbar.stories.tsx b/packages/ui/table/stories/scrollbar.stories.tsx index 92ff60d52..0283e86c8 100644 --- 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, + }, + } + } />
diff --git a/patches/perfect-scrollbar+1.5.5.patch b/patches/perfect-scrollbar+1.5.5.patch index cb31b1db7..499a912b1 100644 --- 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