Q&A
jQueryのscrollifyで一部普通にスクロールする設定をしようとしてます。
scrollifyを指定している前後の部分を普通のスクロールにしたいのですが、上手くいかず、理由がわかりません。
加えて、クラス名.boxの部分はフルスクリーンで出したいのですが、pタグ部分の文字が最初のbox部分に出現してしまいます。
ご教示いただけますでしょうか。よろしくお願いします。
html
1<html> 2<head> 3<meta charset="utf-8"> 4<meta name="viewport" content="width=device-width"> 5<title>scrollify</title> 6<link href="css/style.css" rel="stylesheet" type="text/css"> 7</head> 8 9<body> 10 <p> 11 普通スクロールの部分、普通スクロールの部分、普通スクロールの部分 12 </p> 13 14 <div class="main-section"> 15 <div class="box box1"> 16 <h2>box1</h2> 17 </div> 18 <div class="box box2"> 19 <h2>box2</h2> 20 </div> 21 <div class="box box3"> 22 <h2>box3</h2> 23 </div> 24 <div class="box box4"> 25 <h2>box4</h2> 26 </div> 27 </div> 28 29 <p> 30 普通スクロールの部分、普通スクロールの部分、普通スクロールの部分 31 </p> 32 33 <script src="js/jquery-3.3.1.min.js"></script> 34 <script src="js/jquery.scrollify.js"></script> 35 <script src="js/script.js"></script> 36</body> 37</html> 38```<!doctype html> 39 40```css 41.box{ 42 color: #fff; 43 height: 100vh; 44 padding: 40px; 45} 46.box1{ 47 background: #45CB99; 48} 49 50.box2{ 51 background: #4CA4CF; 52} 53.box3{ 54 background: #e5cf54; 55} 56.box4{ 57 background: #45CB99; 58} 59 60.pagenation{ 61 padding: 20px; 62 position: fixed; 63 right: 0; 64 top: 50%; 65} 66.pagenation li{ 67 list-style-type: none; 68 margin-bottom: 20px; 69} 70.pagenation a{ 71 display: block; 72 height: 10px; 73 border: 1px solid #000; 74 width: 10px; 75} 76.pagenation a.active{ 77 background: #000; 78}
js
1$(function() { 2var current; 3$.scrollify({ 4 section:".box", 5 setHeights:false, 6 scrollbars:false, 7 standardScrollElements: 'p', 8 before:function(i,box){ 9 current = i 10 $('.pagenation .active').removeClass('active'); 11 $('.pagenation').find('a').eq(i).addClass('active'); 12 }, 13 afterRender:function(){ 14 var pagenation = '<ul class="pagenation">'; 15 $('.box').each(function(i){ 16 pagenation += '<li><a></a></li>'; 17 }); 18 pagenation += '</ul>'; 19 $('.main-section').append(pagenation); 20 $('.pagenation a').each(function(i){ 21 $(this).on('click',function(){ 22 $.scrollify.move(i); 23 }); 24 }); 25 $('.pagenation li:first-child').find('a').addClass('active'); 26 }, 27}); 28$(window).on('resize',function(){ 29 if(current){ 30 var currentScrl = $('.box').eq(current).offset().top; 31 $(window).scrollTop(currentScrl); 32 } 33}); 34});
回答1件
0
.box内にstandardScrollElementsを置かないとダメなのかもしれめません。
.boxにcssがあたっているので名前を変えて、「普通スクロールの部分」をラップする形にしました。
js
1$.scrollify({ 2 section:".page", //変更 3 setHeights:false, 4 scrollbars:false, 5 standardScrollElements: '.standard', //変更 6 before:function(i,box){
html
1<div class="page"> 2 <p class="standard"> 3 普通スクロールの部分<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>普通スクロールの部分<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>普通スクロールの部分 4 </p> 5</div> 6 7<div class="main-section"> 8 <div class="page box box1"> <!--.page追加 --> 9 <h2>box1</h2> 10 </div> 11 <div class="page box box2"> 12 <h2>box2</h2> 13 </div> 14 <div class="page box box3"> 15 <h2>box3</h2> 16 </div> 17 <div class="page box box4"> 18 <h2>box4</h2> 19 </div> 20</div> 21 22<div class="page"> 23 <p class="standard"> 24 普通スクロールの部分<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>普通スクロールの部分<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>普通スクロールの部分 25 </p> 26</div>
投稿2021/08/02 03:57
総合スコア1293
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。