スクロールイベントが発火しない

前提・実現したいこと

要素内のスクロールエフェクトを実施したい。

発生している問題・エラーメッセージ

カスタムスクロールバーを導入して「body」内をスクロールさせることにした。すると今までできていたスクロールイベント（メニューの色をスクロールで変えること、opacity:0のコンテンツをスクロールで表示、スムーズスクロール）が発火しなくなったためコードを書き替えたがうまくいかない。どうすればいいかご教示していただけると助かります。

導入したい場所：body
bodyと.scroll-contentのCSSの高さの指定を無くした状態で本来のスクロールイベントを確認できます。
しかしそうすると、スクロールバーがbody全体の高さになってしまうため、bodyの高さを固定してbody内をスクロールさせる必要があります。

エラーメッセージ：特になし

該当のソースコード

導入したのはjQuery依存のカスタムスクロールバーです。（https://github.com/malihu/malihu-custom-scrollbar-plugin）
やりたいのは、メニューの色をスクロールで変えること、opacity:0のコンテンツをスクロールで表示すること、スムーズスクロールです。
$(window).scrollTop() だとスクロールイベントが発火しないのでコンテンツ名を入れたがうまく動かなかった。どうしてもこのプラグインを使いたいので助けてほしいです。

HTML
1<head>
2   <link rel="stylesheet" href="jquery.mCustomScrollbar.min.css">
3</head>
4<body>
5   <header>
6      <ul>
7         <li><a href="#one">menu</a>
8         <li><a href="#two">menu</a>
9         <li><a href="#three">menu</a>
10      </ul>
11   </header>
12   <div class="wrapper">
13       <div class="swiper-container">
14          <img src="xxx.jpg">
15       </div>
16       <div class="content aniamtion" id="one"> 
17         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
18         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
19         nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
20         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
21         fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
22         culpa qui officia deserunt mollit anim id est laborum.
23      </div>
24      <div class="content opacity-1" id="two"> 
25         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
26         incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
27         nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
28         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
29         fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
30         culpa qui officia deserunt mollit anim id est laborum.
31      </div>
32      <div id="page-top"><a href="#all">▲</a></div>
33   </div>
34    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
35   <script src="jquery.mCustomScrollbar.min.js"></script>
36</body>

CSS
1* {
2    -ms-overflow-style: none; 
3    scrollbar-width: none; 
4}
5*::-webkit-scrollbar {
6    display: none;
7}
8body {
9    overflow: hidden;
10    height: calc(var(--vh) * 100);
11}
12.scroll-content {
13    overflow: auto;
14    height: calc(var(--vh) * 100);
15}
16
17header {
18   position: fixed;
19   text-align: center;
20   top: 0;
21   z-index: 100;
22}
23header ul {
24   display: inline-block;
25}
26header ul li {
27   display: inline-block;
28   margin-right: 1rem;
29}
30header ul li a {
31   color: black;
32}
33.m_fixed ul li a {
34   color: blue;
35}
36
37.swiper-container {
38   height: calc(var(--vh) * 100);
39   width: 100vw;
40   position: relative;
41}
42.swiper-container img {
43   position: absolute;
44   height: 100%;
45   width: 100%;
46}
47.content {
48   min-height: calc(var(--vh) * 100);
49}
50.opacity-1 {
51   background: #000;
52   color: #fff;
53}
54
55#page-top {
56    position: fixed;
57    right: 1%;
58    bottom: 1%;
59    z-index: 999;
60}
61#page-top a {
62    position: relative;
63    display: inline-block;
64    text-align: center;
65    vertical-align: middle;
66    padding: 0 0 0;
67    border-bottom: none;
68    font-size: 1.5rem;
69    border: none; 
70    color: black;
71    background-color: none;
72}
73
74/* animation */
75.animation, .animation-2 {
76    opacity: 0;
77    visibility: hidden;
78    transition: 1.8s all;
79    transform: translateY(60px);
80}
81.animation.effect, .animation-2.effect {
82    opacity: 1;
83    visibility: visible;
84    transform: translateY(0);
85}
86.opacity-1 {
87    opacity: 0 ;
88    visibility: hidden ;
89    transition: 1s all;
90}
91.opacity-1.effect, .opacity-2.effect {
92    opacity: 1;
93    visibility: visible; 
94}

試したこと

javascript
1// custom content scroller
2$(document).ready(function () {
3    var header = $('header'),
4        h_offset = header.offset().top,
5        sH = $('.swiper-container').innerHeight();// 高さ
6    $(".scroll-content").mCustomScrollbar({
7        mouseWheelPixels: 180,
8        theme: "minimal-dark",
9        callbacks: {
10            whileScrolling: function () {
11                var scroller = $(".mCSB_container"),
12                    scrollerBox = scroller.closest(".mCustomScrollBox"),
13                    scrollerTop = scroller.position().top,
14                    boxHeight = scrollerBox.innerHeight(),
15                    scrollY = $('.scroll-content').scrollTop(),
16                    windowH = window.innerHeight;
17                $('.animation').each(function() {
18                    //要素の位置（上端）を取得
19                    var thisPosition = $(this).offset().top;
20                    //要素の高さを取得
21                    var thisHeight = $(this).height();
22                    //要素が画面上に表示されているときにclass="effect"をつける
23                    if (thisPosition <= scrollY + windowH - 150 && thisPosition + thisHeight >= scrollY) {
24                        $(this).addClass('effect');
25                    } else {
26                        $(this).removeClass('effect');
27                    }
28                });
29                $('.animation-2').each(function() {
30                    //要素の位置（上端）を取得
31                    var thisPosition = $(this).offset().top;
32                    //要素の高さを取得
33                    var thisHeight = $(this).height();
34                    //要素が画面上に表示されているときにclass="effect"をつける
35                    if (thisPosition <= scrollY + windowH - 150 && thisPosition + thisHeight >= scrollY) {
36                        $(this).addClass('effect');
37                    }
38                });
39                $('.opacity-1').each(function() {
40                    var thisPosition = $(this).offset().top;
41                    var thisHeight = $(this).height();
42                    if (thisPosition <= scrollY + windowH - 150 && thisPosition + thisHeight >= scrollY) {
43                        $(this).addClass('effect');
44                        $(this).delay(500).queue(function() {
45                            $(this).addClass('effect-2').dequeue()
46                        });
47                    }
48                });
49                $('.opacity-2').each(function() {
50                    var thisPosition = $(this).offset().top;
51                    var thisHeight = $(this).height();
52                    if (thisPosition <= scrollY + windowH - 150 && thisPosition + thisHeight >= scrollY) {
53                        $(this).delay(1000).queue(function() {
54                            $(this).addClass('effect').dequeue()
55                        });
56                        $(this).delay(1500).queue(function() {
57                            $(this).addClass('effect-2').dequeue()
58                        });
59                    }
60                });
61                var topbutton = $('#page-top'),
62                    tb_offset = topbutton.offset().top;
63                if ( scrollerTop < -400 ) { 
64                    topbutton.fadeIn();
65                } else {
66                    topbutton.fadeOut();
67                };
68                if ( scrollerTop > -1 * sH ) { 
69                    header.removeClass('m_fixed');
70                } else {
71                    header.addClass('m_fixed');
72                };
73            }
74        }
75    });
76    // pagetop button
77    $("#page-top").click(function () {
78        $(".scroll-content").mCustomScrollbar("scrollTo", "top", {
79            callbacks: false,
80            scrollInertia: 1000
81        });
82    });
83    // smooth scroll
84    $('a[href^="#"]').click(function() {
85        var href = $(this).attr("href"),
86            target = $(href == "#" || href == "" ? 'html' : href)
87        $(".scroll-content").mCustomScrollbar("scrollTo", target , {
88            callbacks: false,
89            scrollInertia: 1000,
90            callbacks: {
91                whileScrolling: function () {
92                    var scroller = $(".mCSB_container"),
93                        scrollerTop = scroller.position().top;
94                    if ( scrollerTop > -1 * sH ) { 
95                        header.removeClass('m_fixed');
96                    } else {
97                        header.addClass('m_fixed');
98                    };
99                }
100            }
101        });
102    });
103});

ヘッダーの高さを考慮してスムーズスクロールさせるにはどうすればいいか分かりません……。

補足情報（FW/ツールのバージョンなど）

Chrome 最新ver, iPhone Safari 604.1

cerfweb

2020/11/20 12:50

カスタムスクロールバーを適用させたいのはどの部分ですか。また、「今までできていたスクロールイベント」とは具体的に何のことですか。

erp

2020/11/20 13:02

場所はbodyで、スクロールイベントはメニューの色の変更と要素の非表示→表示です。修正しました。

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

回答1件

mCustomScrollbarを使用した場合、position: absolute;である要素のtopの値を変えることによりスクロールしているように見せているようです。従ってscrollイベントをハンドルするのは無理があるかと思います。
mCustomScrollbarの設定でcallbacksをうまく使えばやりたいことが全てできそうですが、erpさんが提示されているJSコードは、mCustomScrollbarを使用するという前提なら、それに沿って全面的に書き換える必要があると思われます。

http://manos.malihu.gr/jquery-custom-content-scroller/#get-started-section
http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/scrollTo_demo.html

投稿2020/11/20 18:37

cerfweb

総合スコア1899