javascript – 检测故意的顶部和底部额外滚动

JavaScript 前端之家
前端之家收集整理的这篇文章主要介绍了javascript – 检测故意的顶部和底部额外滚动，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我试图用 javascript检测一个有意的额外顶部/底部滚动. $(window).scrollTop()和window.pageYOffset没用,因为它们停在Top 0,我想达到类似top -X的东西.对于底部,假设我的文档高度为500,底部就像底部5XX.

编辑：
示例代码可以是：

  1. $(window).scroll(function(){
  2.  
  3.   if(intentionalScrollTop){
  4.     // Do something
  5.   }else if(intentionalScrollDown){
  6.     // Do something
  7.   }
  8.  
  9. });

Gif例子：

解决方法

我从你的问题中理解的不仅是“检测到过度滚动”……
但也可以用它来创建你在问题中显示的动画.

我使用包装div做了一个解决方案,就像我2天前评论的那样.

您可以在CodePen或下面的代码段中看到它.

  1. $(document).ready(function(){
  2. 	    
  3.     var at_Top=true;
  4.     var at_Bottom=false;
  5. 	var prevIoUs_scrolled;
  6. 	var triggerTime=0;
  7.     var scroll_dir=false;   // false=>Down true=>up
  8. 	var scrolled_bottom = $("body").height() - $(window).height();
  9. 	var animationDelay = 300;
  10. 	var animationTimeout = 350;		//Max delay between 2 triggers is 1 sec.
  11. 									//So keep this value under 400ms
  12. 									//Because one complete animation is 300ms+350ms+300ms.
  13. 									//To have longer animation delays,add time to the triggerDelay
  14. 	
  15. 	var triggerDelay=0;	// You can add more delay to allow the next trigger (in seconds).
  16. 	
  17.     $(window).scroll(function(){
  18.         var scrolled=$(window).scrollTop();
  19.  
  20.         // Reached the top?
  21.         if(scrolled==0){
  22.             at_Top=true;
  23.         }else{
  24.             at_Top=false;
  25.         }
  26.  
  27.         // Reached the bottom?
  28.         if(scrolled==scrolled_bottom){
  29.             at_Bottom=true;
  30.         }else{
  31.             at_Bottom=false;
  32.         }
  33.         
  34.         // Scroll direction
  35. 		if( $(this).scrollTop() > prevIoUs_scrolled ){
  36. 			scroll_dir=false;  //scroll down
  37. 		}else{
  38. 			scroll_dir=true;  //scroll up
  39. 		}
  40. 		
  41. 		// Keep prevIoUs scrollTop position in memory
  42. 		prevIoUs_scrolled = $(this).scrollTop();
  43. 		
  44. 		animationTrigger();
  45.     });
  46.  
  47. 	function animationTrigger(){
  48.         if(at_Top && scroll_dir){
  49.             console.log("Scrolling when at top.");
  50. 			$("#wrapper").stop().animate({"margin-top":"3em"},animationDelay);
  51. 			setTimeout(function(){
  52. 				$("#wrapper").stop().animate({"margin-top":0},animationDelay);
  53. 			},animationTimeout);
  54. 			clearTimeout(clearConsole);
  55. 			var clearConsole = setTimeout(function(){
  56. 				console.clear();
  57. 			},3000);
  58.         }
  59.         if(at_Bottom && !scroll_dir){
  60.             console.log("Scrolling when at bottom.")
  61. 			$("#header").stop().animate({"height":0},animationDelay);
  62. 			$("#footer-spacer").stop().animate({"height":"3em"},animationDelay);
  63. 			setTimeout(function(){
  64. 				$("#header").stop().animate({"height":"3em"},animationDelay);
  65. 				$("#footer-spacer").stop().animate({"height":0},3000);
  66.         }
  67.     }
  68. 	
  69.     // KEYBOARD ARROWS UP/DOWN AND PAGE UP/DOWN SCROLLING
  70.     $(window).on("keydown",function(e){
  71.         //console.log(e.which);
  72.         if( (e.which==38) || (e.which==33) ){    // Arrow up or Page up
  73.             scroll_dir=true;
  74.         }
  75.         if( (e.which==40) || (e.which==34) ){    // Arrow down or Page down
  76.             scroll_dir=false;
  77.         }
  78. 		
  79. 		// Limit triggers to 1 per second... Because when holding a key down for long,it triggers too fast...
  80. 		var thisSecond = new Date().getSeconds()
  81.         if( (triggerTime != thisSecond) || (triggerTime < (thisSecond - triggerDelay) ) ){
  82.             animationTrigger();
  83.             triggerTime=thisSecond;
  84.         }
  85.     })
  86.  
  87.     // WHEEL SCROLLING
  88.     // Inspired from this SO answer: https://stackoverflow.com/a/7309786/2159528
  89.  
  90.     //Firefox
  91.     $(window).bind('DOMMouseScroll',function(e){
  92.         var scrolled2=$(window).scrollTop();
  93.         
  94.         if(e.originalEvent.detail > 0) {
  95.             scroll_dir=false;  //scroll down
  96.             //console.log("down");
  97.         }else {
  98.             scroll_dir=true;   //scroll up
  99.             //console.log("up");
  100.         }
  101.         
  102. 		// Limit triggers to 1 per second... Because wheel turns quite fast.
  103.         var thisSecond = new Date().getSeconds()
  104.         if( (triggerTime != thisSecond) || (triggerTime < (thisSecond - triggerDelay) ) ){
  105.             animationTrigger();
  106.             triggerTime=thisSecond;
  107.         }
  108.     });
  109.  
  110.     //IE,Opera,Safari
  111.     $(window).bind('mousewheel',function(e){
  112. 		
  113.         if(e.originalEvent.wheelDelta < 0) {
  114.             scroll_dir=false;  //scroll down
  115.         }else {
  116.             scroll_dir=true;   //scroll up
  117.         }
  118.         
  119.         // Limit triggers to 1 per second... Because wheel turns quite fast.
  120.         var thisSecond = new Date().getSeconds()
  121.         if( (triggerTime != thisSecond) || (triggerTime < (thisSecond - triggerDelay) ) ){
  122.             animationTrigger();
  123.             triggerTime=thisSecond;
  124.         }
  125.     });
  126.  
  127. });	// End Document.ready
  1. body,wrapper{
  2.     padding:0;
  3.     margin:0;
  4.     height:100;
  5. }
  6. #page{
  7.     height:1500px;
  8.     width:100%;
  9. }
  10. #header,#footer{
  11.     height:3em;
  12.     padding:0.5em;
  13.     background-color:cyan;
  14. }
  15. #content{
  16.     height:calc(100% - 8em);    /* -8em for header and footer... (height: 3em + padding: 2x 0,5em) */
  17.     padding:0 0.5em;
  18.     overflow:hidden;
  19. }
  20. #footer-spacer{
  21.     height:0px;
  22. }
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  2. <div id="wrapper">
  3.     <div id="page">
  4.         <div id="header">
  5.             This is the page's top
  6.         </div>
  7.         <div id="content">
  8.             <h1>Scroll this page to see the overscroll effect at top and bottom</h1>
  9.             <br>
  10.             <ul>
  11.                 <li>using the mouse wheel</li>
  12.                 <li>keyboard arrows</li>
  13.                 <li>keyboard page up/down</li>
  14.             </ul>
  15.             <br>
  16.             <br>
  17.             Content...<br>
  18.             Content...<br>
  19.             Content...<br>
  20.             Content...<br>
  21.             Content...<br>
  22.             Content...<br>
  23.             Content...<br>
  24.             Content...<br>
  25.             Content...<br>
  26.             Content...<br>
  27.             Content...<br>
  28.             Content...<br>
  29.             Content...<br>
  30.             Content...<br>
  31.             Content...<br>
  32.             Content...<br>
  33.             Content...<br>
  34.             Content...<br>
  35.             Content...<br>
  36.             Content...<br>
  37.             Content...<br>
  38.             Content...<br>
  39.             Content...<br>
  40.             Content...<br>
  41.             Content...<br>
  42.             Content...<br>
  43.             Content...<br>
  44.             Content...<br>
  45.             Content...<br>
  46.             Content...<br>
  47.             Content...<br>
  48.             Content...<br>
  49.             Content...<br>
  50.             Content...<br>
  51.             Content...<br>
  52.             Content...<br>
  53.             Content...<br>
  54.             Content...<br>
  55.             Content...<br>
  56.             Content...<br>
  57.             Content...<br>
  58.             Content...<br>
  59.             Content...<br>
  60.             Content...<br>
  61.             Content...<br>
  62.             Content...<br>
  63.             Content...<br>
  64.             Content...<br>
  65.             Content...<br>
  66.             Content...<br>
  67.             Content...<br>
  68.             Content...<br>
  69.             Content...<br>
  70.             Content...<br>
  71.             Content...<br>
  72.             Content...<br>
  73.             Content...<br>
  74.             Content...<br>
  75.             Content...<br>
  76.             Content...<br>
  77.             Content...<br>
  78.             Content...<br>
  79.             Content...<br>
  80.             Content...<br>
  81.             Content...<br>
  82.             Content...<br>
  83.             Content...<br>
  84.             Content...<br>
  85.             Content...<br>
  86.             Content...<br>
  87.             Content...<br>
  88.             Content...<br>
  89.             Content...<br>
  90.             Content...<br>
  91.             Content...<br>
  92.             Content...<br>
  93.             Content...<br>
  94.             Content...<br>
  95.             Content...<br>
  96.             Content...<br>
  97.             Content...<br>
  98.             Content...<br>
  99.             Content...<br>
  100.             Content...<br>
  101.             Content...<br>
  102.             Content...<br>
  103.             Content...<br>
  104.             Content...<br>
  105.             Content...<br>
  106.             Content...<br>
  107.         </div>
  108.         
  109.         <div id="footer">
  110.             This is the page's bottom
  111.         </div>
  112.         <div id="footer-spacer"></div>
  113.     </div>
  114. </div>

当页面位于顶部或底部时检测滚动尝试…
用它来设置你展示的动画是另一个.

顶部的方法：
包装器的边距从0em到3em动画,将标题和内容向下推.
因此页面“看起来”像过度滚动.

底部的方法：
这是一个挑战……
不能与包装器的margin-bottom顶部相同,因为它可以工作……但是在视口下面,这不是我们想要的.

所以在这种情况下,我将“内容”定义为height：calc(100％ – 8em)(页眉和页脚都有高度：3em和填充：0.5em)只是为了确保包装器100％填充.动画的空div在页脚下…当它的高度从0em到3em时,它通过向上推动页脚来创建过度滚动“幻觉”.

请注意,标题会在同一时间缩回,以释放空间.此时,标题不可见,为什么不呢？

拖动滚动条,旋转鼠标滚轮并按下键盘上4个“常用”键中的1个(箭头和向上/向下翻页)时,此脚本可以正常工作.

我留下了很多console.log(),您可以使用它来探索它是如何工作的,并改进动画并使其成为您的品味.

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...
搞懂js中小数运算精度问题原因及解决办法
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...
搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理
什么是跨域 跨域 ： 广义的跨域包含一下内容 ： 1.资源跳转（链接跳转，重定向跳转，表单提...
前端对base64编码的理解，原生js实现字符base64编码
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...
搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式
搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ： 的缩写，说都能直接说出来 ：模型， ：视图...
js判断浏览器是否支持webGL
起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。 在各种浏览器上运行...
js判断undefined和null
js判断undefined js判断null js判断null和undefined
将文字自动转为banner打印形式的工具
http://patorjk.com/software/taag/
聊一聊 bootstrap 的轮播图插件
今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...
js实现图片无缝循环跑马灯
html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作