セクションごとに横スクロールするようにしたいです。

実現したいこと

scrollify.jsを用いて、マウスホイールを下にスクロールした時、セクションごとに横スクロールが出来るように試みています。

発生している問題・分からないこと

縦スクロールでの実装はできたのですが、これをそのまま横スクロールにするにはどうすればいいでしょうか？

scrollify.jsはgithubからダウンロードして使用しています。
github

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1">
6	<title></title>
7	<link rel="stylesheet" href="css/destyle.css"> 
8	<link rel="stylesheet" type="text/css" href="css/style.css">
9	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
10	<script type="text/javascript" src="js/jquery.scrollify.js"></script>
11</head>
12<body>
13<div class="main">
14  <section class="section section-blue js-section" data-section-name="section1">
15    <div class="section-content">
16      <h2>section 1</h2>
17      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor reprehenderit, labore nostrum hic. Natus hic corporis, delectus vero voluptatem maxime voluptate tempora expedita quo iure atque vitae deserunt culpa quibusdam!</p>
18    </div>
19  </section>
20  <section class="section section-red js-section" data-section-name="section2">
21    <div class="section-content">
22      <h2>section 2</h2>
23      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quae, sint dicta quod, nemo possimus! Impedit sed rerum quidem, voluptate possimus quo accusamus vitae necessitatibus incidunt ut fugit nihil voluptatem.</p>
24      <h3>heading</h3>
25      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quae, sint dicta quod, nemo possimus! Impedit sed rerum quidem, voluptate possimus quo accusamus vitae necessitatibus incidunt ut fugit nihil voluptatem.</p>
26    </div>
27  </section>
28  <section class="section section-blue js-section" data-section-name="section3">
29    <div class="section-content">
30      <h2>section 3</h2>
31      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor reprehenderit, labore nostrum hic. Natus hic corporis, delectus vero voluptatem maxime voluptate tempora expedita quo iure atque vitae deserunt culpa quibusdam!</p>
32    </div>
33  </section>
34  <ul class="pager" id="js-pager"></ul>
35</div>
36<script type="text/javascript" src="js/javascript.js"></script>
37</body>
38</html>

CSS
1@charset "utf-8";
2
3/* ===========================
4// ページャー
5// ------------------------------*/
6.main {
7  position: relative;
8}
9
10.pager {
11  position: fixed;
12  top: 50%;
13  left: 0;
14  transform: translateY(-50%);
15  padding: 0;
16}
17.pager li {
18  display: block;
19  margin: 20px;
20}
21.pager li a {
22  display: block;
23  width: 10px;
24  height: 10px;
25  background: #fff;
26  border-radius: 50%;
27}
28.pager .is-current a {
29  background: #232323;
30}
31
32/* ===========================
33// section
34// ------------------------------*/
35.section {
36  width: 100%;
37}
38.section.is-show .section-content {
39  opacity: 1;
40}
41
42.section-content {
43  max-width: 300px;
44  margin: 0 auto;
45  padding: 40px 60px;
46  text-align: center;
47  opacity: 0;
48  transition: opacity .5s ease .75s;
49}
50
51h2 {
52  color: #232323;
53}
54h2:first-child {
55  margin-top: 0;
56}
57
58h3 {
59  color: #232323;
60}
61
62p {
63  color: #232323;
64}
65
66.section-red {
67  background-color: #ff6363;
68}
69
70.section-blue {
71  background-color: #8fbbff;
72}
73
74.section-green {
75  background-color: #fff;
76}
77

JavaScript
1var $section = $('.js-section'); // 各スライド
2var $pager = $('#js-pager'); // ページャー枠
3
4// scrollifyのオプション設定
5var option = {
6  interstitialSection : "header,footer",//除外するコンテンツ
7  section : '.js-section',
8  easing: "swing",
9  scrollSpeed: 600,
10  scrollbars: true,
11  before:function(index, section) {
12    setCurrent(index); // 現在のsectionにクラスを設定
13    pagerCurrent(index); // ページャーに対応する順番にクラス名を付与
14  },
15  afterRender:function() {
16    createPager(); // ページャーの作成
17    setCurrent(); // 現在のsectionにクラスを設定
18  }
19};
20
21$(function() {
22  $.scrollify(option); // scrollifyの実行
23});
24
25
26
27// ==============================
28// functions
29// ------------------------------
30
31// 現在のsectionにクラスを設定
32function setCurrent(index = 0) {
33  // 一旦、すべてのsectionのクラスをとる
34  $section.removeClass('is-show');
35  // 現在のsectionのみにクラスを付与
36  $section.eq(index).addClass('is-show');
37}
38
39// ページャーに対応する順番にクラス名を付与
40function pagerCurrent(index = 0) {
41  var $li = $pager.find('li');
42  $li.removeClass('is-current');
43  $li.eq(index).addClass('is-current');
44}
45
46// ページャーの作成
47function createPager() {
48  $section.each(function(i, e){
49    // ページ内リンク先の作成
50    var sectionName = $(e).attr('data-section-name');
51    // 最初のliにはクラスを付与
52    var addClass = '';
53    if (i === 0) {
54        addClass = 'is-current';
55    }
56    // liのHTML作成
57    var html = '';
58    html += '<li class="' + addClass + '">';
59    html += '<a href="#' + sectionName + '"></a>';
60    html += '</li>';
61    $pager.append(html);
62  });
63  
64  pagerLink();
65}
66
67// ページャーでaタグをクリックされたらスクロールする
68function pagerLink () {
69  $pager.find('a').on('click', function() {
70    $.scrollify.move($(this).attr("href"));
71  });
72}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

scrollify.jsを用いた横スクロールの方法をいくらか調べましたが、該当するものは出てきませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

Can Scrollify be used for horizontal scrolling?

No, this is not currently supported.
lukehaas/Scrollify: A jQuery plugin that assists scrolling and snaps to sections.

とのことです。

投稿2025/07/10 08:52