ドロワーメニューの3階層目がスクロールできない（drawer.js・bootstrap.js）

前提・実現したいこと

ドロワーメニューの高さが画面サイズ以上になった時にスクロールが出来るようにしたい

発生している問題・エラーメッセージ

・drawer.js等を使って、ドロワーメニューを作成したのですが、
3階層目を開いた時、画面サイズを超えると下にスクロールが出来ず、メニューを下まで見ることができない
※コード上だとSubmenu1-1～Submenu1-3が開かれた状態の時
↓
12/16更新
メニューを開くたびにiscrollをrefrehすることで、開いた分だけのメニューをすべてスクロール出来るようにはなったのですが、
メニューを下にスクロールして先頭（コードだとMenu1）の部分が見えない状態で他のメニューを開くと、
画面が先頭に戻ってしまうのを止めたいです。

該当のソースコード

HTML
1<head>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
3<script type="text/javascript" charset="utf-8" src="javascripts/drawer.min.js"></script>
4<script type="text/javascript" charset="utf-8" src="javascripts/iscroll.js"></script>
5<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
6<script type="text/javascript">
7　$(document).ready(function(){
8    $('.drawer').drawer();
9　});
10  $('.drawer-dropdown a.submenu').on("click", function(e){
11    $(this).next('ul').toggle(500);
12    e.stopPropagation();
13    e.preventDefault();
14    $(this).toggleClass('clicked');
15     setTimeout(function(){
16       var myScroll;
17       myScroll = new IScroll('#drawer-scroll',{
18         mouseWheel: true
19       });
20        myScroll.refresh();
21      } , 500);
22  });
23</script>
24</head>
25<body>
26<div class="drawer drawer--top drawer--navbarTopGutter">
27    <header class="drawer-navbar drawer-navbar--fixed" role="banner">
28        <div class="drawer-container">
29            <div class="drawer-navbar-header">
30                <a class="drawer-brand" href="index_drawer.html"><div class="img_logo"><img src="#" width="100" height="60" alt="###" /></div></a>
31                <button type="button" class="drawer-toggle drawer-hamburger">
32                    <span class="sr-only">toggle navigation</span>
33                    <span class="drawer-hamburger-icon"></span>
34                </button>
35            </div>
36        <nav class="drawer-nav" role="navigation">
37            <ul class="drawer-menu">
38                <li class="drawer-dropdown">
39                    <a class="drawer-menu-item submenu" href="###" data-toggle="dropdown">Menu1<span class="drawer-caret"></span></a>
40                    <ul class="drawer-dropdown-menu">
41                        <li><a class="drawer-dropdown-menu-item" href="#">Submenu1</a></li>
42                        <li><a class="drawer-dropdown-menu-item" href="#">Submenu2</a></li>
43                        <li><a class="drawer-dropdown-menu-item" href="#">Submenu3</a></li>
44                    </ul>
45                </li>
46                <li class="drawer-dropdown">
47                    <a class="drawer-menu-item" href="#" data-toggle="dropdown">Menu2<span class="drawer-caret"></span></a>
48                    <ul class="drawer-dropdown-menu">
49                        <li class="drawer-dropdown">
50                            <a class="drawer-menu-item submenu" href="#" data-toggle="dropdown">Submenu1<span class="drawer-caret"></span></a>
51                            <ul class="drawer-dropdown-menu">
52                                <li><a class="drawer-dropdown-menu-item" href="#">Submenu1-1</a></li>
53                                <li><a class="drawer-dropdown-menu-item" href="#">Submenu1-2</a></li>
54                                <li><a class="drawer-dropdown-menu-item" href="#">Submenu1-3</a></li>
55                            </ul>
56                        </li>
57                        <li><a class="drawer-dropdown-menu-item" href="#">Submenu2</a></li>
58                        <li><a class="drawer-dropdown-menu-item" href="#">Submenu3</a></li>
59                    </ul>
60                </li>
61                <li><a class="drawer-menu-item" href="#">Menu3</a></li>
62                <li><a class="drawer-menu-item" href="#">TOPへ</a></li>
63            </ul>
64        </nav>
65    </div>
66    </header>
67    <main role="main">
68        <!-- Page content -->
69    </main>
70</div>
71</body>

css
1/* drawer.min.cssに追加 */
2/* 980px以上では表示しない */
3@media screen and (min-width:981px){
4  .drawer{
5    display: none;
6  }
7}
8/* 子階層の三角ボタン */
9.drawer-menu-item .subcaret{
10  display: inline-block;
11  width: 0;
12  height: 0;
13  margin-left: 20px;
14  transition: transform .2s ease,opacity .2s ease,-webkit-transform .2s ease;
15  transform: rotate(0deg);
16  vertical-align: middle;
17  border-top: 5px solid;
18  border-right: 5px solid transparent;
19  border-left: 5px solid transparent;
20}
21/* クリックされた階層のみ回転 */
22.clicked .subcaret{
23  transform: rotate(180deg);
24}
25.drawer-menu,.drawer-dropdown-menu{
26  height: 100%;
27  overflow: auto;
28  -webkit-overflow-scrolling: touch;
29}

試したこと

・navに「overflow: auto;」を追加→動かない
・cssコード内最後の通り.drawer-menu,.drawer-dropdown-menuに「overflow: auto;」を追加→動かない
・navの次のul（.drawer-menu）に「style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"」
がDevツールで表示されたので、ツール上で削除→JS等のコードからなのか、メニュー開くと復活
↓
iscroll.jsを使用しており「refresh」をかけたら、スクロール出来る範囲はメニューを開いた分までは見れるようになりました。