当隐藏溢出时滚动功能不起作用

我有一个程序应该在向上滚动时执行某些操作，但它不响应我的滚动。我有理由相信这是因为当隐藏溢出时滚动功能不起作用

overflow: hidden

属性我已经添加到正文，但是，我不希望滚动条显示。如何使动画节目当用户滚动向下，但在同一时间，不要移动至页面任何想法（没有真正向下滚动？）

的jsfiddle： http://jsfiddle.net/aritro33/KFxgL/

HTML：

<div style="width: 200px; height: 1000px"></div> 
<div id="up">SCROLL UP</div>

CSS：

@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; 
}

JS：

$('#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; 
    }); 
});

来源

2014-01-22 aritro33

什么是你要反应实际事件没有overflow:hidden？没有滚动，因此没有溢出的滚动事件：隐藏。你想抓住鼠标滚轮事件（不知道真名是什么）？ –

对于WebKit浏览器，你可以试试这个：在body

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

DEMO

来源

2014-01-22 16:02:22 laaposto

当隐藏溢出时滚动功能不起作用

回答

相关问题