アニメーションdelighters.jsを使うと画面が横にスクロールしてしまう

困っていること

以下のgif動画のように、
delighters.jsを使うと画面が横にスクロールしてしまう

やりたいこと

横スクロールしないようにしたい
詳しい方、ご教授頂けると幸いです。

###ソース

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title></title>
6  </head>
7
8<body>
9<style>
10.anim{
11  height: 240px;
12  background: red;
13}
14.anim:nth-child(odd){
15  background: yellow;
16}
17.animL.delighter {
18  transition: all .5s ease-out;
19  transform: translateX(-100%);
20  opacity: 0;
21}
22.animL.started {
23  transform: none;
24  opacity: 1;
25}
26.animR.delighter {
27  transition: all .5s ease-out;
28  transform: translateX(100%);
29  opacity: 0;
30}
31.animR.started {
32  transform: none;
33  opacity: 1;
34}
35</style>
36
37<div class="anim">
38
39</div>
40
41<div class="anim animL">
42  <p>アニメなし</p>
43</div>
44<div class="anim animL">
45  <p>アニメなし</p>
46</div>
47<div class="anim animL">
48  <p>アニメなし</p>
49</div>
50<div class="anim animL">
51  <p>アニメなし</p>
52</div>
53<div class="anim animL">
54  <p>アニメなし</p>
55</div>
56<div class="anim animL">
57  <p>アニメなし</p>
58</div>
59<div class="anim animL">
60  <p>アニメなし</p>
61</div>
62<div class="anim animL">
63  <p>アニメなし</p>
64</div>
65
66<div class="anim animL" data-delighter>
67  <p>animL</p>
68</div>
69<div class="anim animR" data-delighter>
70  <p>animR</p>
71</div>
72
73<script type='text/javascript' src='delighters.js'></script>
74</body>
75
76</html>
77

コードペン

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

回答1件

htmlは全体をwrapにする。

html
1<!DOCTYPE html>
2
3<div class="wrap">
4<html lang="ja">
5  <head>
6    <meta charset="utf-8">
7    <title></title>
8  </head>
9
10<body>
11
12<div class="anim">
13
14</div>
15
16
17<div class="anim animL">
18  <p>アニメなし</p>
19</div>
20<div class="anim animL">
21  <p>アニメなし</p>
22</div>
23<div class="anim animL">
24  <p>アニメなし</p>
25</div>
26
27<div class="anim animL" data-delighter>
28  <p>animL</p>
29</div>
30<div class="anim animR" data-delighter>
31  <p>animR</p>
32</div>
33
34<script type='text/javascript' src='delighters.js'></script>
35 <!-- /.wrap --></div>
36</body>
37
38</html>

cssは
.wrap {
overflow: hidden;
}
をつけるだけ！！

css
1.wrap {
2	overflow: hidden;
3}
4
5.anim{
6  height: 240px;
7  background: red;
8}
9.anim:nth-child(odd){
10  background: yellow;
11}
12.animL.delighter {
13  transition: all .5s ease-out;
14  transform: translateX(-100%);
15  opacity: 0;
16}
17.animL.started {
18  transform: none;
19  opacity: 1;
20}
21.animR.delighter {
22  transition: all .5s ease-out;
23  transform: translateX(100%);
24  opacity: 0;
25}
26.animR.started {
27  transform: none;
28  opacity: 1;
29}