スクロールを邪魔する「スクロールスナップ」のデモコード（CSS）
いったん下にスクロールすると、上に戻りにくくなる、戻ろうとすると押し返されるバグを見かけたので、どのようなコードで実現できるか Gemini と相談してデモ用のコードを作った。
スクロールスナップで実現できるようで、 最近ではcssで実現するらしい。JavaScriptを使ったデモのコードは前回書いた。
スクロールを邪魔する「スクロールスナップ」のデモコード（JavaScript）
https://html-memo-hitorinezumi.blogspot.com/2025/12/scrollLockDemo.html
ここでは、CSSを使った単純なコードを残しておく。JavaScriptを使ったデモと比べて吸着力が弱いが、スムーズにスクロールできないので鬱陶しくはある。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Scroll Snapによるセクション吸着</title>
<style>
/* ページ全体のリセット */
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
/* -------------------------------------- */
/* メインのスクロールコンテナ (親要素) */
/* -------------------------------------- */
.scroll-container {
height: 100vh;
width: 100vw;
overflow-y: scroll;
/* 【重要 1】スクロール吸着を有効にする */
scroll-snap-type: y mandatory; /* y軸方向、必須のスナップ */
/* スクロールを滑らかにする（強制ジャンプではなく吸着アニメーション） */
scroll-behavior: smooth;
}
/* -------------------------------------- */
/* ブロック（子要素） */
/* -------------------------------------- */
.section {
width: 50%;
margin-left: 25%;
display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; font-size: 1.5em; padding: 20px; box-sizing: border-box;
border-bottom: 5px dashed #ccc;
/* 【重要 2】吸着位置を指定する */
scroll-snap-align: start; /* 要素の開始位置（トップ）に吸着させる */
}
/* 高さの設定（不均一） */
#section1 { height: 50vh; background-color: #ffe0e0; }
#section2 { height: 60vh; background-color: #e0f0ff; }
#section3 { height: 50vh; background-color: #e0ffe0; }
#section4 { height: 80vh; background-color: #ffffe0; }
h1 { font-size: 2em; margin-bottom: 0.5em; }
</style>
</head>
<body>
<div class="scroll-container" id="scrollContainer">
<section class="section" id="section1"><h1>セクション 1：50vh 【吸着】</h1></section>
<section class="section" id="section2"><h1>セクション 2：60vh 【吸着】</h1></section>
<section class="section" id="section3"><h1>セクション 3：50vh 【吸着】</h1></section>
<section class="section" id="section4"><h1>セクション 4：80vh 【吸着】</h1></section>
</div>
</body>
</html>
コメント
コメントを投稿