加入滚动区域设置。

src/pages/Tones.tsx

@@ -7,6 +7,7 @@ import { ColorPicker } from '../components/ColorPicker';
 import { FlexColorStand } from '../components/FlexColorStand';
 import { HSegmentedControl } from '../components/HSegmentedControl';
 import { LabeledPicker } from '../components/LabeledPicker';
+import { ScrollArea } from '../components/ScrollArea';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Tones.module.css';
 
@@ -42,6 +43,7 @@ export function Tones() {
         <h3>Color Tones</h3>
         <p>By regularly changing the color hue to generate a series of light and dark colors.</p>
       </header>
+      <ScrollArea enableY>
         <section className={styles.explore_section}>
           <aside className={styles.function_side}>
             <div>
@@ -102,6 +104,7 @@ export function Tones() {
             </div>
           </div>
         </section>
+      </ScrollArea>
     </div>
   );
 }