From 6bff93b518299eb9a22ca4e4bbd215a2d3e736aa Mon Sep 17 00:00:00 2001
From: storywithoutend <storywithoutend@gmail.com>
Date: Wed, 28 Aug 2024 20:16:30 +0800
Subject: [PATCH] fix scrollbox intersectional observer

---
 .../src/components/atoms/ScrollBox/ScrollBox.test.tsx       | 6 +++---
 components/src/components/atoms/ScrollBox/ScrollBox.tsx     | 1 +
 components/src/components/atoms/ScrollBox/styles.css.ts     | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx
index 6f7bae0b..80a9d30c 100644
--- a/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx
+++ b/components/src/components/atoms/ScrollBox/ScrollBox.test.tsx
@@ -64,13 +64,13 @@ describe('<ScrollBox />', () => {
     mockIntersectionObserver(true, false)
     render(<Component />)
   })
-  it.skip('should only show top line when intersecting with bottom', () => {
+  it('should only show top line when intersecting with bottom', () => {
     mockIntersectionObserver(false, true)
     render(<Component />)
     expectLine('top', true)
     expectLine('bottom', false)
   })
-  it.skip('should show both lines neither intersecting', () => {
+  it('should show both lines neither intersecting', () => {
     mockIntersectionObserver(false, false)
     render(<Component />)
     expectLine('top', true)
@@ -116,7 +116,7 @@ describe('<ScrollBox />', () => {
     expectLine('top', false)
     expectLine('bottom', false)
   })
-  it.skip('should fire callback on intersection', () => {
+  it('should fire callback on intersection', () => {
     mockIntersectionObserver(true, false)
     const onReachedTop = vi.fn()
     render(<Component onReachedTop={onReachedTop} />)
diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
index a4b92ee7..2be27498 100644
--- a/components/src/components/atoms/ScrollBox/ScrollBox.tsx
+++ b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
@@ -167,6 +167,7 @@ export const ScrollBox = ({
               }
             : {}
         }
+        ref={ref}
       >
         <Box
           data-testid="scrollbox-top-intersect"
diff --git a/components/src/components/atoms/ScrollBox/styles.css.ts b/components/src/components/atoms/ScrollBox/styles.css.ts
index 70ccce42..9ebb5bf9 100644
--- a/components/src/components/atoms/ScrollBox/styles.css.ts
+++ b/components/src/components/atoms/ScrollBox/styles.css.ts
@@ -27,7 +27,7 @@ export const scrollBox = style({
     '&::-webkit-scrollbar-thumb': {
       transition: 'box-shadow 0.15s ease-in-out',
       boxShadow: `inset 0 0 ${commonVars.space['3']} ${commonVars.space['3']} ${modeVars.color.greyLight}`,
-      border: 'solid $1 transparent',
+      border: `solid ${commonVars.space['1']} transparent`,
       borderRadius: commonVars.space['3'],
       backgroundColor: 'transparent',
     },