如何解决overflow: hidden后滚动条不被监听

事情是这样的：
html和body给了样式：

html,body{
      height: 100%;
      overflow: hidden;
    }

里面的容器给了样式：

#app{
      height: 100%;
      overflow: auto;
    }

结构是这样的：

<body>
  <div id="app"></div>
  <a class="tips" href="javascript:scroll(0,0)" id="tips">回到顶部</a>
</body>

问题出现了，之前设置的监听滚动事件不起效果了，script里是这样的：

window.onscroll= function(){
                //变量t是滚动条滚动时，距离顶部的距离
                var t = document.documentElement.scrollTop;
                var scrollup = document.getElementById('tips');
                //tips是要显现与隐藏的div
                if(t>0){
                    scrollup.style.display="block";
                }else{          //恢复正常
                    scrollup.style.display="none";
                }
            }

现在根本监听不到 scrollTop的值请问我该怎么调试拜托啦

javascript css

html5