Windowsシステム設定の調整

スムーズスクロールを有効にするには、OS設定の変更が必要です：

1. コントロールパネルを開く
2. 「パフォーマンス」で検索
3. 「Windowsの表示方法とパフォーマンスを調整」を選択
4. 「ウィンドウ内のアニメーションコントロールと要素」を有効化

Reactコンポーネントの実装

import { useEffect, useRef, useState } from 'react';
import './ScrollComponent.css';

const ScrollNavigation = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [selectedIdx, setSelectedIdx] = useState(0);
  const [elements, setElements] = useState<number[]>([]);

  useEffect(() => {
    fetchElements();
  }, []);

  useEffect(() => {
    if (elements.length > 0 && containerRef.current) {
      const targetElement = containerRef.current.children[selectedIdx];
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  }, [selectedIdx, elements]);

  const fetchElements = async () => {
    const data = await new Promise<number[]>(resolve => {
      setTimeout(() => resolve([...Array(10).keys()]), 300);
    });
    setElements(data);
  };

  const navigateNext = () => {
    setSelectedIdx(prev => (prev >= 9 ? 0 : prev + 1));
  };

  return (
    <div className="container">
      <div className="navigation">
        <span>現在位置: {selectedIdx}</span>
        <button onClick={navigateNext}>次へ</button>
      </div>
      
      <div className="scroll-area">
        <div className="content-container" ref={containerRef}>
          {elements.map(item => (
            <div key={item} className="content-item">{item}</div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ScrollNavigation;

スタイルシートの実装

.container {
  padding: 1.5rem;
  max-width: 320px;
}

.scroll-area {
  margin: 1.5rem 0;
  padding: 0.75rem;
  height: 60vh;
  border: 2px solid #dc2626;
  background-color: #fbcfe8;
  box-sizing: border-box;
}

.content-container {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.content-container::-webkit-scrollbar {
  display: none;
}

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-item {
  background-color: #d9f99d;
  margin-bottom: 0.75rem;
  height: 12.5rem;
  border: 1px solid #65a30d;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

動作説明

ボタンクリックでselectedIdx状態が更新され、useEffectフックが発動します。
scrollIntoViewメソッドが対象要素をビューポート内に表示し、{ behavior: 'smooth' }オプションで滑らかなスクロールを実現します。
scrollbar-width: noneと::-webkit-scrollbarでスクロールバーを非表示にしています。