Javascript 隐藏溢出时滚动功能不工作

我有一个程序，当你向上滚动时，它应该做某些事情，但是，它不响应我的滚动。我有理由相信这是因为

overflow: hidden

属性，但是，我不希望滚动条显示。当用户向下滚动，但同时不移动页面（实际上不向下滚动）时，如何使动画显示

JSFIDDLE：

HTML:

JS:

---

对于webkit浏览器，您可以尝试以下操作： 无

溢出：隐藏在
正文中

::-webkit-scrollbar { 
    display: none; 
}

您希望对什么实际事件作出反应？没有滚动，因此没有溢出：隐藏的滚动事件。是否要捕获鼠标滚轮事件（不知道真实名称）？
 @import url(http://fonts.googleapis.com/css?family=Roboto:100);
 body {
     overflow: hidden;
     text-align: center;
     background-color: #79CDCD;

 }
 p {
     font-family:'Roboto';
     font-size: 60px;
     color: white;
     z-index: -1;
 }
 #next {
     background-color: #79cda3;
     width: 1185px;
     position: relative;
     right: 10px;
     height: 750px;
     top: -200px;
     z-index: -1;
 }
 .animated {
     -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
     -ms-animation-duration: 1s;
     -o-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     -moz-animation-fill-mode: both;
     -ms-animation-fill-mode: both;
     -o-animation-fill-mode: both;
     animation-fill-mode: both;
 }
 .animated.hinge {
     -webkit-animation-duration: 2s;
     -moz-animation-duration: 2s;
     -ms-animation-duration: 2s;
     -o-animation-duration: 2s;
     animation-duration: 2s;
 }
 @-webkit-keyframes bounceInDown {
     0% {
         -webkit-transform: translateY(-2000px);
     }
     60% {
         -webkit-transform: translateY(30px);
     }
     80% {
         -webkit-transform: translateY(-10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInDown {
     0% {
         -moz-transform: translateY(-2000px);
     }
     60% {
         -moz-transform: translateY(30px);
     }
     80% {
         -moz-transform: translateY(-10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInDown {
     0% {
         -ms-transform: translateY(-2000px);
     }
     60% {
         -ms-transform: translateY(30px);
     }
     80% {
         -ms-transform: translateY(-10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInDown {
     0% {
         -o-transform: translateY(-2000px);
     }
     60% {
         -o-transform: translateY(30px);
     }
     80% {
         -o-transform: translateY(-10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInDown {
     0% {
         transform: translateY(-2000px);
     }
     60% {
         transform: translateY(30px);
     }
     80% {
         transform: translateY(-10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInDown {
     -webkit-animation-name: bounceInDown;
     -moz-animation-name: bounceInDown;
     -ms-animation-name: bounceInDown;
     -o-animation-name: bounceInDown;
     animation-name: bounceInDown;
 }
 @-webkit-keyframes bounceInUp {
     0% {
         -webkit-transform: translateY(2000px);
     }
     60% {
         -webkit-transform: translateY(-30px);
     }
     80% {
         -webkit-transform: translateY(10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInUp {
     0% {
         -moz-transform: translateY(2000px);
     }
     60% {
         -moz-transform: translateY(-30px);
     }
     80% {
         -moz-transform: translateY(10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInUp {
     0% {
         -ms-transform: translateY(2000px);
     }
     60% {
         -ms-transform: translateY(-30px);
     }
     80% {
         -ms-transform: translateY(10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInUp {
     0% {
         -o-transform: translateY(2000px);
     }
     60% {
         -o-transform: translateY(-30px);
     }
     80% {
         -o-transform: translateY(10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInUp {
     0% {
         transform: translateY(2000px);
     }
     60% {
         transform: translateY(-30px);
     }
     80% {
         transform: translateY(10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInUp {
     -webkit-animation-name: bounceInUp;
     -moz-animation-name: bounceInUp;
     -ms-animation-name: bounceInUp;
     -o-animation-name: bounceInUp;
     animation-name: bounceInUp;
 }
 @-webkit-keyframes bounceInUp {
     0% {
         -webkit-transform: translateY(2000px);
     }
     60% {
         -webkit-transform: translateY(-30px);
     }
     80% {
         -webkit-transform: translateY(10px)
     }
     100% {
         -webkit-transform: translateY()
     }
 }
 @-moz-keyframes bounceInUp {
     0% {
         -moz-transform: translateY(2000px);
     }
     60% {
         -moz-transform: translateY(-30px);
     }
     80% {
         -moz-transform: translateY(10px)
     }
     100% {
         -moz-transform: translateY()
     }
 }
 @-ms-keyframes bounceInUp {
     0% {
         -ms-transform: translateY(2000px);
     }
     60% {
         -ms-transform: translateY(-30px);
     }
     80% {
         -ms-transform: translateY(10px)
     }
     100% {
         -ms-transform: translateY()
     }
 }
 @-o-keyframes bounceInUp {
     0% {
         -o-transform: translateY(2000px);
     }
     60% {
         -o-transform: translateY(-30px);
     }
     80% {
         -o-transform: translateY(10px)
     }
     100% {
         -o-transform: translateY()
     }
 }
 @keyframes bounceInUp {
     0% {
         transform: translateY(2000px);
     }
     60% {
         transform: translateY(-30px);
     }
     80% {
         transform: translateY(10px)
     }
     100% {
         transform: translateY()
     }
 }
 .bounceInUp {
     -webkit-animation-name: bounceInUp;
     -moz-animation-name: bounceInUp;
     -ms-animation-name: bounceInUp;
     -o-animation-name: bounceInUp;
     animation-name: bounceInUp;
 }

$('#next').fadeTo(0,0);
$(function () {
    var lastScroll = 0;
    $(window).scroll(function (event) {
        var st = $(this).scrollTop();
        if (st > lastScroll) {     
$('p').fadeTo(350, 0); 
$('p').fadeTo(370, 1);    
$('#next').fadeTo(0,1);
$('#next').addClass('box animated bounceInUp');
        } 
        lastScroll = st;
    });
});

::-webkit-scrollbar { 
    display: none; 
}