二分割レイアウトのwebサイトで、overflow-y:scrollを使いつつ、スクロールで要素をふわっと表示させたい

お世話になります。
現在作成しているwebサイトで困ったことが起きましたので、
ご助力いただけますと幸いです。

前提・実現したいこと

二分割レイアウトのwebサイトで、右側のみスクロールしたい。
右側をスクロールした時に、アニメーションで要素がふわっと表示させるようにしたい。

使用しているもの

二分割レイアウトは以下のサイトのソースを利用させていただいています。
https://webdesign-trends.net/entry/2325

スクロールでふわっと表示するアニメーションは以下のサイトを利用させていただいています。
http://michalsnik.github.io/aos/

発生している問題

<div class="split-box right-box"></div>の中で画像などを配置し、アニメーションを適用したい箇所を<div data-aos="fade-up"></div>でくくるのですが、非表示のままになります。クリックはできますが、アニメーションしながら表示されてきません。

該当のソースコード

html
1<!doctype html>
2<html lang="jp">
3<head>
4<link href="css/style.css" rel="stylesheet" type="text/css" />
5<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
6</head>
7
8<body>
9　<div class="split-box left-box">
10　　<!--左側の記述-->
11　</div>
12
13<div class="split-box right-box">
14<!--割愛-->
15<div id="sample">
16<h2>SAMPLE</h2>
17　<div class="thumbnail" data-aos="fade-up" data-aos-anchor-placement="top-center"><a href="/portfolio/works/04/"><img src="images/sample_img5.jpg" alt=""></a></div>
18　<div class="thumbnail" data-aos="fade-up" data-aos-anchor-placement="top-center"><a href="/portfolio/works/03/"><img src="images/sample_img4.jpg" alt=""/></a></div>
19　<div class="thumbnail" data-aos="fade-up" data-aos-anchor-placement="top-center"><a href="/portfolio/works/02/"><img src="images/sample_img3.jpg" alt=""/></a></div>
20　<div class="more_box"><a href="/portfolio/works/"><div id="more">more</div></a></div>
21　<div class="clear"></div>
22</div>
23
24<!--割愛-->
25
26<!--右側の記述-->
27</div>
28
29
30<!--js-->
31<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
32<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
33<script>
34	AOS.init();
35</script>
36
37</body>
38</html>

試したこと

1.ブラウザをマウスカーソルで掴んで手動で拡大させると表示がされました。

2.デベロッパーツールなどで下記のorverflow-y: scroll;を外してみると、スクロールで動作します。

css
1.right-box {
2    background-color: #fff;
3    color: #666;
4    right: 0;
5    overflow-y: scroll;
6}

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

回答1件

ベストアンサー

予測：要素の表示はウィンドウのスクロール位置と表示させたい要素の位置で取っているのではないか。

右側の要素をオーバフローするのではなく、左側の要素をfixedで固定してみてはどうでしょうか。

投稿2018/05/09 06:56

Atsushi_Okumura

総合スコア355

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！