jQueryのscrollifyで一部普通にスクロールする設定

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件

.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>