Q&A
html
1<body> 2 <main> 3 <div class="a content"></div> 4 <div class="b content"></div> 5 <div class="c content"></div> 6 </main> 7</body>
css
1*{ 2 padding: 0; 3 margin: 0; 4} 5 6main { 7 scroll-snap-type: y mandatory; 8 width:100%; 9 height:100vh; 10 overflow-y: scroll; 11} 12 13.a,.b,.c{ 14 scroll-snap-align: start; 15 width: 100%; 16 height:100vh; 17} 18 19.a{ 20 background-color: #f00; 21} 22.b{ 23 background-color: #0f0; 24} 25.c{ 26 background-color: #00f; 27} 28//下記のクラスを付与し背景色を変える 29.active{ 30 background-color: #000; 31}
js
1//下記の一連の流れが感知されない 2 var $window = $(window); 3var b_top = $(".b").offset().top; 4 5$window.scroll(function(){ 6var y = $(this).scrollTop(); 7console.log(y); 8 9 if(y>=b_top){ 10 $(".b").addClass("active"); 11 }; 12 13 });
テスト環境にて
scroll-snapでscroll後、scroll値を取得してactiveクラスを与える
という一連の動作をしたいのですが、scroll-snapでのscrollでは$window.scrollを感知してくれません
改善方法を教えて頂きたく質問しました。
よろしくお願いします。
回答1件
0
ベストアンサー
Javascript
1// ここを 2// var $window = $(window); 3// $window.scroll(function(){ 4 5// こちらに変更して下さい。 6$(document).scroll(function (){ 7
投稿2020/09/23 19:05
編集2020/09/23 19:06
総合スコア2506
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。