CSSでスクロールをスナップさせる方法

CSS Scroll Snapプロパティを使用する方法:

CSS Scroll Snapプロパティを使用すると、スクロールポイントでスナップする要素を指定できます。

.container {
  scroll-snap-type: y mandatory; /* スナップを有効にする方向と方法を指定 */
}
.item {
  scroll-snap-align: start; /* スナップする位置を指定 */
}

上記の例では、.containerクラス内の要素が垂直方向にスナップされます。scroll-snap-typeプロパティでスナップを有効にし、scroll-snap-alignプロパティでスナップする位置を指定しています。

JavaScriptとCSSを組み合わせる方法:

JavaScriptを使用してスクロールイベントを監視し、特定の位置にスナップする要素のスタイルを変更する方法もあります。

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

.container {
  height: 300px;
  overflow-y: scroll;
}
.item {
  height: 200px;
}
.snapped {
  background-color: yellow; /* スナップ時のスタイルを指定 */
}

JavaScript:

const container = document.querySelector('.container');
container.addEventListener('scroll', function() {
  const items = document.querySelectorAll('.item');

  items.forEach(function(item) {
    const rect = item.getBoundingClientRect();

    if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
      item.classList.add('snapped');
    } else {
      item.classList.remove('snapped');
    }
  });
});

上記の例では、.containerクラス内の要素がスクロールされると、表示領域内に入った要素が黄色の背景色でスナップされます。

これらはスクロールをスナップさせるための一般的な方法の一部です。実際の使用方法は、特定の要件やデザインに合わせて調整する必要があります。