JS——scroll
scrollWidth：父div宽度小于子div宽度，父div scrollWidth宽度为子div的宽度，大于则为本身的宽度width+padding
scrollHeight：父div高度小于子div高度，父div scrollHeight高度为子div高度，大于则为本身的高度height+padding
注意事项：IE67，scrollHeight即使不超出盒子，它的值也是内容的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;border: 1px solid #000;">
<div style="width: 120px;height: 400px;border: 1px solid #ccc;"></div>
</div>
<script>
var divEle=document.getElementsByTagName("div")[0];
console.log(divEle.scrollWidth);//122
console.log(divEle.scrollHeight);//402
</script>
</body>
</html>
scrollLeft：被浏览器卷去的左边内容的长度
scrollTop：被浏览器卷曲的头部内容的长度
注意事项：一般通过window.onscroll监听，它们的使用有严重的兼容性问题：
1、未声明DTD（谷歌只认识这样的形式，IE9+也认识）：document.body.scrollTop
2、已经声明DTD（IE678只认识这样的形式，IE9+任何时候都认识）：document.documentElement.scrollLeft
3、不管是是否声明DTD（火狐谷歌IE9+认识）：window.pageYOffset
区别：谷歌判断依据是以body为主，而ie判断依据是整个html
判断是否声明：DTD：document.compatMode==="BackCompat" BackCompat：未声明 CSS1Compat：已声明
<script>
window.onscroll=function () {
var xLeft=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
var yTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
document.title=xLeft+" "+yTop;
}
</script>
JS——scroll的更多相关文章
- js scroll 教程
<html><head><script language=javascript>function s(){var c = window.document.body. ...
- js scroll函数
$(function () { $(".sticky").hide(); var top = $(window).scrollTop(); if (top >= 100) { ...
- js scroll nav
http://jsfiddle.net/cse_tushar/Dxtyu/141/http://ironsummitmedia.github.io/startbootstrap-scrolling-n ...
- JS——scroll动画
固定导航栏 1.计算导航栏到顶部的距离值 2.当scrollTop值大于这个距离值就添加定位,当小于距离值后解除定位 注意事项:当导航栏添加定位之后,导航栏就脱离了文档流,也就是不占位了,下面的盒子就 ...
- JS——scroll封装
DTD未声明:document.body.scrollTop DTD已声明:document.documentElement.scrollTop 火狐谷歌IE9:window.pageYOffset ...
- 原生JS scroll()、scrollTo()、scrollBy()
scroll() 此方法接收两个参数,依次为X坐标和Y坐标:设置滚动条的偏移位置 scrollTo() 此方法和scroll()作用一样,都是设置滚动条的偏移位置. scrollBy() 此法发同样 ...
- js scroll动画
知识点 1.window.scrollTo (x,y):可以把内容滚动到指定位置 scroll scroll:卷动意思(书卷) 从上到下移动 1.window.onscroll 窗口滚动事件 ...
- nightwatch.js - scroll until element is visible
.getLocationInView() Determine an element's location on the screen once it has been scrolled into vi ...
- js scroll事件
滚动改变头部颜色,当滚动到最顶端头部颜色还原 滚动前 滚动后 代码
随机推荐
- HDU - 3407 - String-Matching Automata
先上题目: String-Matching Automata Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ...
- log4j2.xml 的配置 及使用
log4j2.xml配置 <?xml version="1.0" encoding="UTF-8"?> <Configuration > ...
- Ubuntu 16.04安装indicator-sysmonitor实现导航条显示上下行网速/CPU/内存使用率
安装: sudo add-apt-repository ppa:fossfreedom/indicator-sysmonitor sudo apt-get update sudo apt-get in ...
- 链表中倒数第N个元素——剑指Offer
https://www.nowcoder.net/practice/529d3ae5a407492994ad2a246518148a?tpId=13&tqId=11167&tPage= ...
- 1.7－BGP②
BGP的更新源(BGP Neighbor Update Source Address): 原则1: 在默认情况下, BGP路由器以自己路由表中,到达对方BGP邻居的地址的那条路由所指示的出接口(物理接 ...
- C++之：友元类
一.文章来由 上一篇写了友元函数,这一次写一个姊妹篇,继续深入探究一下友元类. 二.定义 友元类的全部成员函数都是还有一个类的友元函数.都能够訪问还有一个类中的隐藏信息(包含私有成员和保护成员). 当 ...
- 第十四周（OOP版电子词典）
/* *copyright(c) 2015,烟台大学计算机学院 *All rights reserved. *文件名:第十四周(OOP版电子词典) *作者:王忠 *完毕日期:2015.6.10 *版本 ...
- UVA - 10691 Subway
题目大意:给定n个点.要求建造尽量少得铁路(从原点发射出的射线).使得全部点到铁路的最短距离小于d. 解题思路:题目能够转化成区间选点问题,即以极角来表示铁轨.然后计算出每一个区间可行的极角范围,进行 ...
- 微信JS-SDK怎样使用
前两天要用到微信JS库的的一句话--wx.closeWindow();可是整个调用过程有点儿泪奔了.. .. 尽管开发人员平台上说的清清楚楚,可是使用起来就是not ok! 一,绑定域名 登录到微信公 ...
- 从头认识java-13.7 什么时候使用泛型？
这一章节我们来讨论一下什么时候使用泛型? 答案:当你希望代码能够跨多个类型(不同的类型,不包括继承关系)工作的时候. 1.当没有确切类型的时候 以下是错误的代码: package com.ray.ch ...