使用自定义Scroll布局组件替代浏览器默认滚动条。

src/pages/Wheels.module.css

@@ -9,7 +9,6 @@
     flex-direction: row;
     align-items: stretch;
     gap: var(--spacing-m);
-    overflow-y: auto;
   }
   .function_side {
     display: flex;

src/pages/Wheels.tsx

@@ -3,6 +3,7 @@ import { useAtom } from 'jotai';
 import { useState } from 'react';
 import { ColorPicker } from '../components/ColorPicker';
 import { LabeledPicker } from '../components/LabeledPicker';
+import { ScrollArea } from '../components/ScrollArea';
 import { VSegmentedControl } from '../components/VSegmentedControl';
 import { ColorWheel } from '../page-components/wheels/ColorWheel';
 import { currentPickedColor } from '../stores/colors';
@@ -20,6 +21,7 @@ export function Wheels() {
         <h3>Color Wheels</h3>
         <p>Choose the required color on the color wheel according to color theory.</p>
       </header>
+      <ScrollArea enableY>
         <section className={styles.explore_section}>
           <aside className={styles.function_side}>
             <div>
@@ -72,6 +74,7 @@ export function Wheels() {
             />
           </div>
         </section>
+      </ScrollArea>
     </div>
   );
 }