博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器滚动条高度的获取
阅读量:6504 次
发布时间:2019-06-24

本文共 753 字,大约阅读时间需要 2 分钟。

开始

最近做业务需求时,需要监听滚动条scoll事件,获取滚动条高度,用的document.body.scrollTop发现得到的值一直是0,后来做了一些查询,挖出不少秘密,做次笔记,以免忘掉

先放结论:

  1. 对有doctype申明的页面 可以使用:document.documentElement.scrollTop
  2. 没有doctype申明的页面使用:document.body.scrollTop
  3. safari:特例独行:使用 window.pageYOffset

所以我们可以这样获取scrollTop:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;复制代码

什么是DTD:

DTD(文档类型定义)的作用是定义 XML 文档的合法构建模块。它使用一系列的合法元素来定义文档结构 在我们的页面中是这样展现

有些东西不手写一遍永远记不下来:

screen对象(针对的是整个屏幕):
  1. screen.widht|height:整个屏幕的高度跟宽度
  2. screen.avaiWidth|availHeight: 屏幕可用宽高(减去底下任务栏的高度)

window对象(针对的是浏览器)
  1. window.outerWidth|outerHeight:整个浏览器的宽高
  2. window.innerWidth|outerWidth:浏览器可用的宽高(出去工具栏的高度,但是包括滚动条)

元素对象

  1. ele.offerWidth|offerHeight: 元素总的宽高(包括滚动距离)
  2. body.clientWidth|clientHeight: 一般用来描述文旦视口的大小

转载地址:http://syqyo.baihongyu.com/

你可能感兴趣的文章
The Letter Carrier's Rounds(摘)
查看>>
ASCII对照表
查看>>
Redis 基本操作(一)
查看>>
java基本数据类型
查看>>
小酌重构系列[7]——使用委派代替继承
查看>>
第十六章 springboot + OKhttp + String.format
查看>>
两种不同的重置样式方法(normalize.css)
查看>>
微信公众号开发
查看>>
关于MarshalByRefObject的解释
查看>>
Database API
查看>>
hexo 添加标签
查看>>
【Kafka】
查看>>
WPF简单模拟QQ登录背景动画
查看>>
封装TeeChart控件
查看>>
关于Xcode的项目文件夹
查看>>
UT-Austin大学在Image search and large-scale retrieval方面的一系列papers
查看>>
demo03linearlayoutdemo;
查看>>
git revert和reset区别
查看>>
List集合remove元素的问题
查看>>
Java IO流学习总结四:缓冲流-BufferedReader、BufferedWriter
查看>>