我试图用
javascript检测一个有意的额外顶部/底部滚动. $(window).scrollTop()和window.pageYOffset没用,因为它们停在Top 0,我想达到类似top -X的东西.对于底部,假设我的文档高度为500,底部就像底部5XX.
编辑：
示例代码可以是：
$(window).scroll(function(){
if(intentionalScrollTop){
// Do something
}else if(intentionalScrollDown){
// Do something
}
});
解决方法
我从你的问题中理解的不仅是“检测到过度滚动”……
但也可以用它来创建你在问题中显示的动画.
但也可以用它来创建你在问题中显示的动画.
$(document).ready(function(){
var at_Top=true;
var at_Bottom=false;
var prevIoUs_scrolled;
var triggerTime=0;
var scroll_dir=false; // false=>Down true=>up
var scrolled_bottom = $("body").height() - $(window).height();
var animationDelay = 300;
var animationTimeout = 350; //Max delay between 2 triggers is 1 sec.
//So keep this value under 400ms
//Because one complete animation is 300ms+350ms+300ms.
//To have longer animation delays,add time to the triggerDelay
var triggerDelay=0; // You can add more delay to allow the next trigger (in seconds).
$(window).scroll(function(){
var scrolled=$(window).scrollTop();
// Reached the top?
if(scrolled==0){
at_Top=true;
}else{
at_Top=false;
}
// Reached the bottom?
if(scrolled==scrolled_bottom){
at_Bottom=true;
}else{
at_Bottom=false;
}
// Scroll direction
if( $(this).scrollTop() > prevIoUs_scrolled ){
scroll_dir=false; //scroll down
}else{
scroll_dir=true; //scroll up
}
// Keep prevIoUs scrollTop position in memory
prevIoUs_scrolled = $(this).scrollTop();
animationTrigger();
});
function animationTrigger(){
if(at_Top && scroll_dir){
console.log("Scrolling when at top.");
$("#wrapper").stop().animate({"margin-top":"3em"},animationDelay);
setTimeout(function(){
$("#wrapper").stop().animate({"margin-top":0},animationDelay);
},animationTimeout);
clearTimeout(clearConsole);
var clearConsole = setTimeout(function(){
console.clear();
},3000);
}
if(at_Bottom && !scroll_dir){
console.log("Scrolling when at bottom.")
$("#header").stop().animate({"height":0},animationDelay);
$("#footer-spacer").stop().animate({"height":"3em"},animationDelay);
setTimeout(function(){
$("#header").stop().animate({"height":"3em"},animationDelay);
$("#footer-spacer").stop().animate({"height":0},3000);
}
}
// KEYBOARD ARROWS UP/DOWN AND PAGE UP/DOWN SCROLLING
$(window).on("keydown",function(e){
//console.log(e.which);
if( (e.which==38) || (e.which==33) ){ // Arrow up or Page up
scroll_dir=true;
}
if( (e.which==40) || (e.which==34) ){ // Arrow down or Page down
scroll_dir=false;
}
// Limit triggers to 1 per second... Because when holding a key down for long,it triggers too fast...
var thisSecond = new Date().getSeconds()
if( (triggerTime != thisSecond) || (triggerTime < (thisSecond - triggerDelay) ) ){
animationTrigger();
triggerTime=thisSecond;
}
})
// WHEEL SCROLLING
// Inspired from this SO answer: https://stackoverflow.com/a/7309786/2159528
//Firefox
$(window).bind('DOMMouseScroll',function(e){
var scrolled2=$(window).scrollTop();
if(e.originalEvent.detail > 0) {
scroll_dir=false; //scroll down
//console.log("down");
}else {
scroll_dir=true; //scroll up
//console.log("up");
}
// Limit triggers to 1 per second... Because wheel turns quite fast.
var thisSecond = new Date().getSeconds()
if( (triggerTime != thisSecond) || (triggerTime < (thisSecond - triggerDelay) ) ){
animationTrigger();
triggerTime=thisSecond;
}
});
//IE,Opera,Safari
$(window).bind('mousewheel',function(e){
if(e.originalEvent.wheelDelta < 0) {
scroll_dir=false; //scroll down
}else {
scroll_dir=true; //scroll up
}
// Limit triggers to 1 per second... Because wheel turns quite fast.
var thisSecond = new Date().getSeconds()
if( (triggerTime != thisSecond) || (triggerTime < (thisSecond - triggerDelay) ) ){
animationTrigger();
triggerTime=thisSecond;
}
});
}); // End Document.ready
body,wrapper{
padding:0;
margin:0;
height:100;
}
#page{
height:1500px;
width:100%;
}
#header,#footer{
height:3em;
padding:0.5em;
background-color:cyan;
}
#content{
height:calc(100% - 8em); /* -8em for header and footer... (height: 3em + padding: 2x 0,5em) */
padding:0 0.5em;
overflow:hidden;
}
#footer-spacer{
height:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="page">
<div id="header">
This is the page's top
</div>
<div id="content">
<h1>Scroll this page to see the overscroll effect at top and bottom</h1>
<br>
<ul>
<li>using the mouse wheel</li>
<li>keyboard arrows</li>
<li>keyboard page up/down</li>
</ul>
<br>
<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
Content...<br>
</div>
<div id="footer">
This is the page's bottom
</div>
<div id="footer-spacer"></div>
</div>
</div>
当页面位于顶部或底部时检测滚动尝试…
用它来设置你展示的动画是另一个.
顶部的方法：
包装器的边距从0em到3em动画,将标题和内容向下推.
因此页面“看起来”像过度滚动.
底部的方法：
这是一个挑战……
不能与包装器的margin-bottom顶部相同,因为它可以工作……但是在视口下面,这不是我们想要的.
所以在这种情况下,我将“内容”定义为height：calc(100％ – 8em)(页眉和页脚都有高度：3em和填充：0.5em)只是为了确保包装器100％填充.动画的空div在页脚下…当它的高度从0em到3em时,它通过向上推动页脚来创建过度滚动“幻觉”.
请注意,标题会在同一时间缩回,以释放空间.此时,标题不可见,为什么不呢？
拖动滚动条,旋转鼠标滚轮并按下键盘上4个“常用”键中的1个(箭头和向上/向下翻页)时,此脚本可以正常工作.
我留下了很多console.log(),您可以使用它来探索它是如何工作的,并改进动画并使其成为您的品味. 原文链接：https://www.f2er.com/js/157077.html
