JavaScript onscroll和scrollTop

onscroll是浏览器的滑动监听事件，当滑动鼠标或者拖动滚动条的时候，就会触发onscroll事件。
scrollTop指的是浏览器页面卷起的高度。
对于scrollTop来说，有两种获取方法

使用document.documentElement.scrollTop获取
使用document.body.scrollTop获取

使用这两种方法都可以获取到浏览器卷起的高度，区别是：
方法1必须在页面写有DOCTYPE标签时才能获取到，而方法2必须在页面没有DOCTYPE的情况下才可以生效。
对于这两个方法来说，使用但不生效的时候，不会报错，那我们也可以使用短路表达式来获取浏览器卷起的高度，这样不管页面存不存在DOCTYPE的情况下都可以获取到页面卷起的高度。

var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

案例：
需求
开始时顶部的导航条和 top按钮不显示，当页面卷起一定的高度时显示
当页面再往上滑动的时候会再隐藏当航条和按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="../reset.css"><style>body{height: 2000px;}#top{width: 100%;height: 50px;background-color: burlywood;display: none;position: fixed;}#toTop{width: 50px;height: 50px;background-color: #ccc;position: fixed;bottom: 30px;right: 30px;text-align: center;line-height: 50px;cursor: pointer;opacity: 0;transition: .5s linear;}#top.active{display: block;}#toTop.active{opacity: 1;}</style>
</head>
<body><div id="top"></div><div id="toTop">TOP</div><script>//获取元素var topBar = document.getElementById('top');var toTop = document.getElementById('toTop');//添加滚动事件window.onscroll = function () {//使用兼容的方法获取浏览器页面卷起的高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;// console.log(scrollTop);//如果卷起的高度大于300即显示if(scrollTop >= 300){topBar.classList.add('active');toTop.classList.add('active');}//小于300即隐藏else if(scrollTop < 300){topBar.classList.remove('active');toTop.classList.remove('active');}//回到顶部的点击事件toTop.onclick = function () {window.scrollTo({top: 0,behavior: 'smooth'});}}  </script>
</body>
</html>

JavaScript onscroll和scrollTop相关推荐

JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
简述:scrollTop是JavaScript中一个非常有用且重要的方法,它用于获取或设置元素的垂直滚动条位置,实现各种滚动相关的功能,无论是回到顶部.滚动到指定位置还是监听滚动事件,都需要用到scr ...
JS使用onscroll、scrollTop实现图片懒加载
今天做到项目中的图片展示,由于每一页的图片数量都很多,因此需要为图片的展示设计一种懒加载的功能. 第一要做的当然就是给程序添加滚动监听事件. 1 //触发拉取图片开关,保证正在拉取时不能再次触发 2 ...
原生态纯JavaScript 100大技巧大收集
来自:http://yonghu.blog.51cto.com/8166136/1346946 1.原生JavaScript实现字符串长度截取 1 2 3 4 5 6 7 8 9 10 11 12 1 ...
原生态纯JavaScript 100大技巧大收集---你值得拥有
原生态纯JavaScript 100大技巧大收集---你值得拥有 1.原生JavaScript实现字符串长度截取 function cutstr(str, len) {var temp;var ico ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
加入收藏代码_100个原生JavaScript代码片段知识点详细汇总【实践】
作者:小棋子js 转发链接:https://www.jianshu.com/p/b5171efa340f JavaScript 是目前最流行的编程语言之一,正如大多数人所说:"如果你想学一门 ...
100个直接可以拿来用的JavaScript实用功能代码片段(转)
把平时网站上常用的一些实用功能代码片段通通收集起来,方面网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作效率. 目录如下: 1.原生JavaScript实现字符串长度截取 2.原生Java ...
使用JavaScript制作页面效果3
一. 1.下拉列表:select对象属性: option[ ]:选项数组 selectedIndex:被选中选项的索引号 length:选项总数方法: add(option对象,添加位置):增加选 ...
详细的JavaScript知识梳理和经典的一百个例题,让你掌握JavaScript
这里先做一下JavaScript知识点的梳理,具体的可领取资料 JavaScript语法: js语法.png DOM操作: DOM操作.png 数据类型面向对象继承闭包插件作用域跨域原型 ...

JavaScript onscroll和scrollTop

JavaScript onscroll和scrollTop相关推荐

最新文章

热门文章