滚动值的兼容问题

最近做了一个滚动定位的特效,里面用到了scrollTop值,主要有以下两种解决浏览器兼容的问题

var top=document.documentElement.scrollTop || document.body.scrollTop;
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

在网上查资料,很多前辈说如果有<!DOCTYPE...>声明document.body.scrollTop始终是0,而document.documentElement.scrollTop能得到正确值,相反,如果不做声明的话,document.documentElement.scrollTop反而会显示为0。但是在chrome浏览器中不管有没有声明document.documentElement.scrollTop始终为0.以document.body.scrollTop为准。发现此问题的过程是因为我用第二个语句判断的时候写错为判断

var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;一直取得都是document.documentElement.scrollTop所以在chrome里面无效。在此做一个记录。
时间: 2024-11-06 23:47:02

滚动值的兼容问题的相关文章

HTML-中&lt;li&gt;标签value值的兼容问题

今天在做项目测试的时候,发现IE浏览器对HTML中<li>标记的value取值存在兼容性问题,特意从4个浏览器出发进行了一些测试.现将测试结论展示如下: 测试类型 IE8 FF16.0.1 Google The World 正整数 正常 正常 正常 正常 负数 转成0 正常 正常 转成0 字母 转成1 转成0 转成0 转成1 字母+数字 转成1 转成0 转成0 转成1 中文 转成1 转成0 转成0 转成1 转自:http://dove19900520.iteye.com/blog/170708

获取元素的CSS样式属性值 IE兼容写法

/** * 获取元素的CSS样式属性值 */function css(element, attrName) { /*if (window.getComputedStyle) return window.getComputedStyle(element)[attrName] return element.currentStyle[attrName];*/ return window.getComputedStyle ? getComputedStyle(element)[attrName]: el

javascript 兼容总结

1 大多数兼容性问题可通过 if(){-}else{-} 来解决 2 this 的指向问题 3 1)构造函数中的 this 指 "."前的对象 4 2)new 出来的对象,this 指当前对象 5 3)回调函数中的 this 指 window 6 4)给当前元素添加事件 this 指当前元素 7 8 JS中出现的兼容性问题的总结 9 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 10   我们都知道js通过style不可以获取行

Android高级图片滚动控件,编写3D版的图片轮播器

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博客了,我也是深感惭愧.那么今天的这篇既然是阔别了一个多月的文章,当然要带来更加给力点的内容了,那么话不多说,赶快进入到今天的正题吧. 说 到图片轮播器,很多的Android应用中都会带有这个功能,比如说网易新闻.淘宝等.最新我们公司的一款应用也加入了这个功能,并且在图片轮播的基础上 还增加了三维立体

onepage scorll全屏滚动插件

onepage scorll全屏滚动插件,它能够很方便.很轻松的制作出单页/全屏滚动页面.兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.head区域引用文件onepage-scroll.css,jquery.min.js,jquery.onepage-scroll.min.js及以下样式 .page1 { } .page2 { background-color: #FF7F50;} .page3 { } .page4 { background-color: #f90;} p.title {

javascript无缝滚动原理

相比之下,无缝拼接能避免切换时出现空白,使用户体验更好! 无缝滚动原理: 制作一个双胞胎,内容跟主体内容一致,样式一致,如果横向排列则并排,当切换的时候,就可以弥补主体空白的地方,其他按普通循环操作即可. 源码: <!DOCTYPE html> <html lang="zn-ch"> <head> <meta charset="UTF-8"> <title>demo</title> <st

Android View的滚动scroll

在View中: public void computeScroll() { //空实现 } public void scrollTo(int x,int y) {//view的(left,top)滚动到一个点(x,y) if (mScrollX != x ||mScrollY != y) { int oldX = mScrollX; int oldY = mScrollY; mScrollX = x; mScrollY = y; invalidateParentCaches(); onScrol

JavaScript中浏览器兼容问题

浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分.我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览器有没有这种能力,即判断当前浏览器是否支持要调用的属性或者方法.下面做了一些简短的介绍. 1.innerText 和 innerContent 1)innerText 和 innerContent 的作用相同 2)innerText IE8之前的浏览器支持 3)innerContent 老版本的Firefox支持 4)新版本的浏览器两种方式都支持 // 老版本浏览器

js 禁止|阻止滚动条滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Ty