マウススクロールしたときにコンテンツが縦スクロールではなく横スクロールさせたときのメモ。
横スクロールコンテンツを構築することは滅多にないけれど、こういったのを実装したかったのです。

HTML

<div class="wrapper">
<header>
<h1>ヘッダー</h1>
</header>
<main>
<div class="contents-container">
<div class="introduction">
紹介エリア
</div>
<div class="contents">
<p>コンテンツ1</p>
</div>
<div class="contents">
<p>コンテンツ2</p>
</div>
<div class="contents">
<p>コンテンツ3</p>
</div>
</div>
</main>
<footer>
<p>フッター</p>
</footer>
</div>

CSS

body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.wrapper {
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
flex-shrink: 0;
background-color: #f0f0f0;
padding: 10px;
text-align: center;
position: fixed;
width: 100%;
z-index: 10;
}
header {
top: 0;
}
footer {
bottom: 0;
}
main {
display: flex;
flex-grow: 1;
margin-top: 60px;
margin-bottom: 40px;
overflow: hidden;
}
.contents-container {
display: flex;
width: 100vw;
height: 100%;
transition: transform 0.5s ease;
}
.introduction, .contents {
flex: 0 0 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.introduction {
background-color: #e0e0e0;
}
.contents {
background-color: #f8f8f8;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.contents a {
text-decoration: none;
color: #333;
font-size: 24px;
}

JavaScript

<script>
document.addEventListener('DOMContentLoaded', () => {
const contentsContainer = document.querySelector('.contents-container');
const sections = document.querySelectorAll('.introduction, .contents');
let currentIndex = 0;
const totalSections = sections.length;
let scrollTimeout;
let scrollDelta = 0;
window.addEventListener('wheel', (e) => {
e.preventDefault();
scrollDelta += e.deltaY;
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
if (scrollDelta > 150) {
currentIndex = Math.min(currentIndex + 1, totalSections - 1);
} else if (scrollDelta < -150) {
currentIndex = Math.max(currentIndex - 1, 0);
}
contentsContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
scrollDelta = 0;
}, 100);
}, { passive: false });
});
</script>

マウススクロールが敏感で、すぐに次のコンテンツに移動してしまったので調整しました。

scrollTimeout = setTimeout(() => {
if (scrollDelta > 150) {
currentIndex = Math.min(currentIndex + 1, totalSections - 1);
} else if (scrollDelta < -150) {
currentIndex = Math.max(currentIndex - 1, 0);
}
contentsContainer.style.transform = `translateX(-${currentIndex * 100}%)`;
scrollDelta = 0;
}, 100);