第49天：封装自己的scrollTop
一、scroll家族
offset 自己的偏移
scroll滚动的
scrollTop和scrollLeft
scrollTop 被卷去的头部
当滑动滚轮浏览网页的时候，网页隐藏在屏幕上方的距离
二、页面滚动效果事件
window.onscroll=function(){页面滚动语句}
三、获取scrollTop
谷歌和没有声明DTD<DOCTYPE>：document.body.scrollTop
火狐和其他浏览器：document.documentElement.scrollTop
IE9+和最新浏览器:window.pageXOffset; pageYOffset(scrollTop)
兼容性写法：
var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
四、json对象表示
var json={key:value,key1:value}
使用方法
var json={name："李白"，age：58};
json名.属性 json.name 李白
五、判断是否声明DTD
document.compatMode==="BackCompat"
BackCompat 未声明
CSS1Compat 已经声明
注意大小写
六、封装scrollTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装自己的scrollTop</title>
<style>
body{
height: 3000px;
}
</style>
</head>
<body> </body>
</html>
<script>
//var json={left:10,right:10};
//json.left
function scroll(){
if(window.pageYOffset!=null){//IE9+和其他浏览器
return{
left:window.pageXOffset,
top:window.pageYOffset
}
}else if(document.compatMode=="CSS1Compat"){//判断是否声明DTD
return{//声明的
left:document.documentElement.scrollLeft,
top:document.documentElement.scrollTop
}
}
return{//未声明的
left:document.body.scrollLeft,
top:document.body.scrollTop
}
} window.onscroll=function(){
console.log(scroll().top);
}
</script>
第49天：封装自己的scrollTop的更多相关文章
- js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装
1. offsetParent 获取的最近的定位的父元素 offsetLeft/offsetTop 是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...
- clientTop,scrollTop，兼容
在开发中常见的额兼容性问题: scrollTop问题: function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { ...
- JavaScript：事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
- 【前端】javascript实现鼠标跟随特效
实现效果: 实现代码: <!DOCTYPE html> <html> <head> <title>鼠标跟随</title> <meta ...
- 【前端】纯html+css+javascript实现楼层跳跃式的页面布局
实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title&g ...
- javaScript动画3 事件对象event onmousemove
事件对象的获取(event的获取) var event = event || window.event;(主要用这种) screenX.pageX和clientX的区别 PageY/pageX: 鼠标 ...
- javaScript动画2 scroll家族
offsetWidth和offsetHight (检测盒子自身宽高+padding+border) 这两个属性,他们绑定在了所有的节点元素上.获取之后,只要调用这两个属性,我们就能够获取元素节点的宽和 ...
- JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条
楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...
- JavaScript初探系列（十）——Event
一.绑定事件的两种方式 (一).方式一:onclick 举例: <body> <button>点我</button> <script> var btn ...
随机推荐
- Solr第一讲——概述与入门
一.solr介绍 1.什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tomcat等这些Serv ...
- CC2640 LaunchPad入门试用-第一篇
1. 先安装固件ble_cc26xx_setupwin32_2_01_00_44423.exe. 2. 打开IAR先找到一个例程测试一下D:\ti\simplelink\ble_cc26xx_2_01 ...
- JQuery表单验证插件
使用jQuery的validate插件实现一个简单的表单验证 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 读google c++规范笔记
全局变量在main函数之前初始化原则上禁止拷贝构造函数和赋值函数如果只有数据,没有方法,可以用struct析构函数声明为虚函数尽量避免重载操作符 难以定位的bug 误以为简单的操作存取控制 可以放到声 ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于css，js显示不出来
有时候取消了对js,css文件的拦截,但是在网页上还是显示不了,可以试一下下面的方法: 在jsp页面添加下面内容 css的调用路径用path来代替
- Appium1.8及以上命令行启动
安装命令行启动版本的Appium,appium-doctor需要独立下载了,用 npm的话需要FQ才好使,所有安装了cnpm代替npm, cnpm是从淘宝的国内镜像下载 npm config rm p ...
- 第五模块：WEB开发基础 第3章·BootStrap&JQuery开发
01-JQuery介绍 02-jQuery文件引入和加载的区别 03-jQuery的基础选择器 04-jQuery的层级选择器 05-jQuery的基本过滤选择器 06-jQuery的属性选择器 07 ...
- Siki_Unity_3-13_编程内功修炼-算法
Unity 3-13 编程内功修炼 -- 算法 任务1&2:课程介绍 主要算法: 分治法 堆排序 二叉树 动态规划 贪心算法 图 任务3:分治算法 -- Divide and Conquer ...
- HDU - 6441（费马大定理）
链接:HDU - 6441 题意:已知 n,a,求 b,c 使 a^n + b^n = c^n 成立. 题解:费马大定理 1.a^n + b^n = c^n,当 n > 2 时无解: 2. 当 ...