第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 ...
随机推荐
- Python3爬虫（十四） 验证码处理
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.图形验证码识别1.使用tesserocr import tesserocr from PIL import I ...
- 常用代码c#
当使用 HttpContext.Current用到不是当前线程会出null的情况,可使用 System.Web.HttpRuntime.AppDomainAppPath获取程序的根路 string p ...
- CodingLabs - MySQL索引背后的数据结构及算法原理
原文:CodingLabs - MySQL索引背后的数据结构及算法原理 首页 | 标签 | 关于我 | +订阅 | 微博 MySQL索引背后的数据结构及算法原理 作者 张洋 | 发布于 2011-10 ...
- 北京Uber优步司机奖励政策（1月15日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 【NAS】NFS中的fsid如何理解
最近在NAS项目中遇到对NFS的fsid有点疑惑.就深入了解一番 在nfs的配置文件/etc/exports中,fsid作为一个共享参数,具体含义如下: 格式: fsid=num|root|uuid ...
- lintcode671 循环单词
循环单词 The words are same rotate words if rotate the word to the right by loop, and get another. Cou ...
- 小球下落 （Dropping Balls，UVA 679）
题目描述: 题目思路: 1.直接用数组模拟二叉树下落过程 //超时 #include <iostream> #include <cstring> using namespace ...
- 火狐metamask账号
火狐metamask lock trophy pyramid sunny aim inmate body sense sing castle cinnamon cram
- 贵州省未来二十年的投资机会的探讨2>
房产投资 升值最快的 在教育资源丰富 生活方便的 地方 价格和地段取其中之一. 其次 车位 再其次墓地等 公寓住房. 还有商标 和网站注册 公司注册 除了以上的这些 还有茅台生效酒 收藏
- ServiceStack.Ormlit sqlserver枚举类型映射字段类型为varchar
请当枚举类型上面加上[Flags]特性就可以了．