diff --git a/utils/vara-ui/src/components/scroll-area/scroll-area.module.scss b/utils/vara-ui/src/components/scroll-area/scroll-area.module.scss
index 7fe7cd35dd..2bcc357d76 100644
--- a/utils/vara-ui/src/components/scroll-area/scroll-area.module.scss
+++ b/utils/vara-ui/src/components/scroll-area/scroll-area.module.scss
@@ -3,7 +3,7 @@
 .container {
   @include lightDark(--thumb-color, #e5e5e7, rgba(255, 255, 255, 0.1));
 
-  overflow-y: auto;
+  overflow: auto;
 
   /* firefox */
   @-moz-document url-prefix() {
@@ -17,6 +17,10 @@
     width: 16px;
   }
 
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+
   &::-webkit-scrollbar-track,
   &::-webkit-scrollbar-thumb {
     background-clip: padding-box;
diff --git a/utils/vara-ui/src/components/scroll-area/scroll-area.tsx b/utils/vara-ui/src/components/scroll-area/scroll-area.tsx
index 4a5826c7e2..9919dcb83b 100644
--- a/utils/vara-ui/src/components/scroll-area/scroll-area.tsx
+++ b/utils/vara-ui/src/components/scroll-area/scroll-area.tsx
@@ -1,14 +1,22 @@
 import cx from 'clsx';
-import { PropsWithChildren } from 'react';
+import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
 
 import styles from './scroll-area.module.scss';
 
-type Props = PropsWithChildren & {
-  className?: string;
-};
+type Props<T extends ElementType> = PropsWithChildren &
+  ComponentPropsWithoutRef<T> & {
+    as?: T;
+    className?: string;
+  };
 
-function ScrollArea({ children, className }: Props) {
-  return <div className={cx(styles.container, className)}>{children}</div>;
+function ScrollArea<T extends ElementType = 'div'>({ as, children, className, ...attrs }: Props<T>) {
+  const Element = as || 'div';
+
+  return (
+    <Element className={cx(styles.container, className)} {...attrs}>
+      {children}
+    </Element>
+  );
 }
 
 export { ScrollArea };