ons-pull-hook：リストを下からスクロールしたときにpullhookのちらつきバグが発生する【ios】

実現させたいこと

リストを下からトップまでスクロールしたときにons-pull-hookのちらつくバグを無効にしたい。
ons-pull-hookが反応してリスト全体がガクつきます。

試したこと

・オーバースクロールを無効にすれば正常に動作すると思い、monacaの設定からオーバースクロールを無効にするにチェックしてデバックビルドしたが無効になりませんでした。

・ons-page .page__contentにover-flow:hiddenにしてlistにover-flow-y:scrollを指定したら、上にスクロールするたびにpull-hookが反応してしまう。

・下記のサイトを参考にしてコードを追加しても変わらなかったです。
リンク内容

慣性/勢いのある状態で長いリストを作成し、スクロールを「再加速」すると問題が発生しました。スクロール中に画面に触れると、迷惑なジャンプ/ちらつきがありました。勢いが止まったかどうかを検出する簡単な方法をグーグルで検索し、「まだ勢いがある」ときに無効な属性をフックに追加し、勢いが終わったときに無効な属性を削除しました。

これにより、次のようなジッターの問題が修正されました。

```

var scrollElement = document.querySelector('#story .page__content');

        scrollElement.addEventListener('scroll', function(){

            if($scope.scrollTimer)
            {
                //clearTimeout(timer);
                $timeout.cancel($scope.scrollTimer);
                if(!loadEl.getAttribute('disabled')) {
                    loadEl.setAttribute('disabled', true);
                }
            }
            $scope.isScrolling = Math.floor(Date.now());
            $scope.scrollTimer = $timeout(function(){
                $scope.isScrolling = 0;
                if(loadEl.getAttribute('disabled')) {
                    loadEl.removeAttribute('disabled');
                }
            }, 120);

        });





### 該当のソースコード
```HTML
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'My app - Page 1';
      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
      }
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }

    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {
        
        var code = [];
        for(var i = 0; i < 30; i++){
          code.push("<ons-list-item>" + i + "</ons-list-item>");
        }
        document.getElementById("list01").innerHTML = code.join("");
        //プルフック
        pull_hook();
      } 
    });

    //プルフック
    function pull_hook(){
       var pullHook = document.getElementById('pull-hook');

      pullHook.addEventListener('changestate', function(event) {
        var message = '';

        switch (event.state) {
          case 'initial':
            message = 'Pull to refresh';
            break;
          case 'preaction':
            message = 'Release';
            break;
          case 'action':
            message = 'Loading...';
            break;
        }

        pullHook.innerHTML = message;
      });

      pullHook.onAction = function(done) {
        setTimeout(done, 1000);
      };
    }
  </script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab label="Tab 1" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id="tab1.html">
    <ons-page id="first-page">
      <!--プルフック-->
      <ons-pull-hook id="pull-hook" height="69px" threshold-height="200px"></ons-pull-hook>
      <!--リスト-->
      <ons-list id="list01"></ons-list>
    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">
    <ons-page id="second-page">
      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </ons-template>
</body>
<style>
  html,body {
    width: 100%;
    height: 100vh;
  }
</style>
</html>