zoukankan      html  css  js  c++  java
  • 关于scrollTop的那些事

         大家在实际项目中,应该是要经常用到scrollTop的,它表示的是可视窗口距离页面顶部的距离,这个scrollTop是可读写的,所以可以用来做页面滚动。

         但是大家或多或少遇到一些浏览器兼容问题,为什么FF可以用,到chorme下就用不了呢?

         这里就要谈到document.documentElementdocument.body了。

         在不声明Doctype的情况下,浏览器默认是混杂模式(Quirks Mode)。而如今我们都是要求自己做标准网页的人,所以我们时刻都要记得声明Doctype,这时候浏览器就是用标准模式(Stranded Mode)进行渲染的,这个时候一般都是用document.documentElement作为查看模式的了。

      对于scrollTop,实际情况是如何呢?

    • 在FF、IE是可以用document.documentElement.scrollTop来获取视口顶部距离文档顶部的高度,或者改变的。
    • 在Chorme、Safari下则是用document.body.scrollTop进行读写的

    那我们该如何做浏览器兼容呢?

    有两种办法:

    1. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //或是短路语言,返回其中一个真的选项。
    2. var scrollTop = document.documentElement.scrollTop + document.body.scrollTop //其中一个有数值,另一个肯定为零,做简单的相加即可得到scrollTop

    当然做scrollTop修改的时候,两种模式都一起修改即可。当然追求极致的同学也是可以用 if 语句进行判断选择的。

  • 相关阅读:
    MathType中怎么设置字体默认颜色
    MathType二次偏导怎么表示
    简单几步让你的公式逼格爆表!
    登陆
    输入框
    表单
    窗体
    hello world
    net 代码生成
    Sql_server四种执行ExecuteReader、ExecuteNonQuery、ExecuteScalar、DataSet.docx
  • 原文地址:https://www.cnblogs.com/YikaJ/p/scrollTop.html
Copyright © 2011-2022 走看看