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的更多相关文章

  1. js scroll 教程

    <html><head><script language=javascript>function s(){var c = window.document.body. ...

  2. js scroll函数

    $(function () { $(".sticky").hide(); var top = $(window).scrollTop(); if (top >= 100) { ...

  3. js scroll nav

    http://jsfiddle.net/cse_tushar/Dxtyu/141/http://ironsummitmedia.github.io/startbootstrap-scrolling-n ...

  4. JS——scroll动画

    固定导航栏 1.计算导航栏到顶部的距离值 2.当scrollTop值大于这个距离值就添加定位,当小于距离值后解除定位 注意事项:当导航栏添加定位之后,导航栏就脱离了文档流,也就是不占位了,下面的盒子就 ...

  5. JS——scroll封装

    DTD未声明:document.body.scrollTop DTD已声明:document.documentElement.scrollTop 火狐谷歌IE9:window.pageYOffset ...

  6. 原生JS scroll()、scrollTo()、scrollBy()

    scroll()  此方法接收两个参数,依次为X坐标和Y坐标:设置滚动条的偏移位置 scrollTo() 此方法和scroll()作用一样,都是设置滚动条的偏移位置. scrollBy() 此法发同样 ...

  7. js scroll动画

    知识点 1.window.scrollTo (x,y):可以把内容滚动到指定位置  scroll  scroll:卷动意思(书卷)  从上到下移动   1.window.onscroll 窗口滚动事件 ...

  8. nightwatch.js - scroll until element is visible

    .getLocationInView() Determine an element's location on the screen once it has been scrolled into vi ...

  9. js scroll事件

    滚动改变头部颜色,当滚动到最顶端头部颜色还原 滚动前 滚动后 代码

随机推荐

  1. WEB开发----springboot的登录拦截机制

    如果是一个后台的管理项目的,有些东西是不能直接就可以访问的,必须要登录才可以进去,所以就需要进行登录拦截,只有登录过的用户才可以正常访问. 登录拦截是不会拦截jsp页面的方法,所以我们需要在Contr ...

  2. codevs 1296 营业额统计 （splay 点操作）

    题目大意 每次加入一个值,并且询问之前加入的数中与该数相差最小的值. 答案输出所有相差值的总和. 解题分析 = = 参考程序 #include <bits/stdc++.h> using ...

  3. Android：使用SparseArray取代HashMap优化性能

    之前看到一篇关于adapter的文章用到了SparseArray,所以在这里写写关于SparseArray的使用方法. SparseArray是官方针对安卓所写的容器,与HashMap类似,只是性能比 ...

  4. ios method swizzling

      阅读器 iOS开发iOS   本文由TracyYih[博客]翻译自NSHipster的文章Method Swizzling.   在上周associated objects一文中,我们开始探索Ob ...

  5. BZOJ 2338 HNOI2011 数矩形 计算几何

    题目大意:给定n个点,求一个最大的矩形,该矩形的四个顶点在给定的点上 找矩形的方法是记录全部线段 若两条线段长度相等且中点重合 这两条线段就能够成为矩形的对角线 于是我们找到全部n*(n-1)/2条线 ...

  6. Java中去除字符串中的空格

    1.去掉首尾的空格 String.trim()  trim()是去掉首尾空格 2.去掉所有的空格 str.replace(" ", ""); 去掉所有空格,包括 ...

  7. tflearn alexnet iter 10

    他会自己下载数据: # -*- coding: utf-8 -*- """ AlexNet. Applying 'Alexnet' to Oxford's 17 Cate ...

  8. 【BeijingWc 2008】 秦腾与教学评估

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1271 [算法] 二分 [代码] #include<bits/stdc++.h& ...

  9. JZOJ 5461 购物 —— 贪心

    题目:https://jzoj.net/senior/#main/show/5461 贪心,原来想了个思路,优先选优惠价最小的 K 个,然后其他按原价排序遍历: 如果当前物品没选过,原价选上,如果选过 ...

  10. 在 CentOS 7上安装并配置 Python 3.6 环境

    前言 按照此方法安装保证以下报错什么的统统都没有! 基础环境 系统:centos7.4 软件:python3 Retrying (Retry(total=0, connect=None, read=N ...