监听页面滚动相关知识点

2018-10-23 admin

监听事件

代码

function pageChange () {
    // ... 页面滚动时,需要做的事情
}
window.addEventListener("scroll" , pageChange, false);

知识点

1、使用 window.addEventListenerdocument.addEventListener 来处理页面上的事件,区别仅仅在于:不同事件模型上,处理的顺序不一样。

  • 捕获,window 先于 document
  • 冒泡,document 先于 window

2、参数:

获取页面滚动高度

代码

function getScrollTop() {
    return window.pageYOffset 
        || document.documentElement.scrollTop  
        || document.body.scrollTop  
        || 0;
}

浏览器兼容性

谷歌 火狐 IE 360 Microsoft Edge
window.pageYOffset Yes Yes Yes Yes Yes
document.documentElement.scrollTop Yes Yes Yes Yes No
document.body.scrollTop No No No No Yes

其中,pageYOffset 属性返回文档在窗口左上角垂直方向滚动的像素

让页面滚动至指定位置

代码

/* 滚动动画
   s: 当前页面滚动高度
   sTop: 指定位置滚动高度
 */
function tabAnimation(s, sTop) {
    var type = s < sTop ? true : false; // true 页面上滑
    var timmer = requestAnimationFrame(function fn() {
        if (type) { s+=50 } 
        else { s-=50 }
        if((type && s > sTop) || (!type && s < sTop)) {
            // $el.scrollTop = sTop;
            window.scrollTo(0, sTop); 
        } else {
            // $el.scrollTop = s;
            window.scrollTo(0, s); 
          timmer = requestAnimationFrame(fn);
        }
    });
}

说明

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。

当你需要更新屏幕画面时就可以调用此方法。在浏览器下次重绘前执行回调函数。回调的次数通常是每秒60次,但大多数浏览器通常匹配 W3C 所建议的刷新频率。

在大多数浏览器里,当运行在后台标签页或者隐藏的<iframe> 里时,requestAnimationFrame() 会暂停调用以提升性能和电池寿命。

原生方法实现 addClass、removeClass 和 hasClass

function hasClass( elements, cName ) { 
  return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") )
}
function addClass( elements, cName ) { 
  if( !hasClass( elements,cName ) ) { 
    elements.className += " " + cName; 
  }
}
function removeClass( elements, cName ){ 
  if( hasClass( elements,cName ) ){ 
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
  }
}

原文链接:https://segmentfault.com/a/1190000016773823

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43431.html

文章标题:监听页面滚动相关知识点

相关文章
angular.js 路由及页面传参示例
页面传参数方法:1、$rootScope。2、(url)/user/:name/:age。 页面转换方法:1、href=/&quot;/index.html rel=“external nofollow” rel=“external nofollo...
2017-03-15
优化RequireJS项目的相关技巧总结
本文将演示如何合并与压缩一个基于RequireJS的项目。本文中将用到苦干个工具,这其中就包括Node.js。 因此,如果你手头上还没有Node.js可以点击此处下载一个。 动机 关于RequireJS已经有很多文章介绍过了。这个工具可以将...
2017-03-27
JavaScript监听文本框回车事件并过滤文本框空格的方法
本文实例讲述了JavaScript监听文本框回车事件并过滤文本框空格的方法。分享给大家供大家参考。具体如下: &lt;script type=&quot;text&#x2F;javascript&quot; language=&quot;j...
2017-03-22
原生js实现模拟滚动条
当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观。 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了。不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是...
2017-03-24
详解JavaScript中数组的相关知识
创建数组 js中数组的声明可以有如下几种方式: var arr = []; &#x2F;&#x2F; 简写模式 var arr = new Array(); &#x2F;&#x2F; new一个array对象 var arr = new ...
2017-03-27
对JavaScript的全文搜索实现相关度评分的功能的方法
全文搜索,与机器学习领域其他大多数问题不同,是一个 Web 程序员在日常工作中经常遇到的问题。客户可能要求你在某个地方提供一个搜索框,然后你会写一个类似 WHERE title LIKE %:query% 的 SQL 语句实现搜索功能。一开...
2017-03-24
JavaScript实现滑动到页面底部自动加载更多功能
话不多说,请看代码: &#x2F;&#x2F;滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); &#x2F;&#x2F...
2017-03-17
js实现类似MSN提示的页面效果代码分享
这是一篇基于javascript实现了模仿MSN消息提示的效果,推荐给大家,感兴趣的小伙伴们可以参考一下。 为大家分享的模仿MSN消息提示的效果代码如下 &lt;html&gt; &lt;head&gt; &lt;meta http-e...
2017-03-29
jQuery实现自动滚动到页面顶端的方法
本文实例讲述了jQuery实现自动滚动到页面顶端的方法。分享给大家供大家参考。具体实现方法如下: $(&quot;.scroll&quot;).click(function(event) { &#x2F;&#x2F;prevent th...
2017-03-23
js禁止页面刷新与后退的方法
本文实例讲述了js禁止页面刷新与后退的方法。分享给大家供大家参考。具体实现方法如下: &lt;script language=&quot;javascript&quot;&gt; &#x2F;&#x2F;禁止用F5键 function do...
2017-03-24
回到顶部