js取得滚动条位置 是否存在 距离某一侧像素值(转)
日期：2014-05-16 浏览次数：20342 次
js获得滚动条位置 是否存在 距离某一侧像素值(转)
javascript中如何判断dom对象是否出现了滚动条
某些场景下需要用javascript去获取页面中的某个dom对象是否出现了滚动条，
那么javascript的dom操作为我们提供了哪些方法可以得到呢？
参考DHTML手册会发现：
dom对象有offsetTop和 offsetLeft属性，
它们所获得的值是当前滚动条所滚动的数值；
当滚动条没有滚动或者没有出现的时候，
这两个值都是0。
dom对象还有属性：offsetHeight和 scrollHeight，
offsetHeight是dom对象相对父级元素的可见高度，
scrollHeight 是dom对象包含了滚动部分的高度。
有了上述的四个基本属性，
那么我们可以尝试进行判断（当然以下的判断是在没有设置css样式：overflow:hidden的情况下的）：
当dom对象offsetTop > 0的时候，说明滚动条已经存在了；
另外，如果scrollHeight > offsetHeight即包含滚动部分的高度超出可视高度的时候，
滚动条即已出现。
综合上述两条可以得出以下结论：
if (dom.offsetTop > 0 || dom.scrollHeight > dom.offsetHeight) {
//滚动条已出现
}
当然，
是不是只有这两个条件可以判断滚动条是否存在呢？
如有朋友有更好的方法，可点击本文后面的“我要留言”给我留言，
感谢赐教～
js获得滚动条位置
注意body的使用
function getScroll()
{
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return { t: t, l: l, w: w, h: h };
}
获取浏览器垂直滚动条向下滚动的像素
关于js中 document.body.scrollTop 不能返回正确值的原因 收藏
本来是为了通过 document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，造成这样的原因和html的头部声明有关，如果头部声明 为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，这样肯定得到的结果是 0，如果该为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种
1、var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; }
2、用document.documentElement.scrollTop 替代 document.body.scrollTop
javascript中如何判断dom对象是否出现了滚动条
某些场景下需要用javascript去获取页面中的某个dom对象是否出现了滚动条，
那么javascript的dom操作为我们提供了哪些方法可以得到呢？
参考DHTML手册会发现：
dom对象有offsetTop和 offsetLeft属性，
它们所获得的值是当前滚动条所滚动的数值；
当滚动条没有滚动或者没有出现的时候，
这两个值都是0。
dom对象还有属性：offsetHeight和 scrollHeight，
offsetHeight是dom对象相对父级元素的可见高度，
scrollHeight 是dom对象包含了滚动部分的高度。
有了上述的四个基本属性，
那么我们可以尝试进行判断（当然以下的判断是在没有设置css样式：overflow:hidden的情况下的）：
当dom对象offsetTop > 0的时候，说明滚动条已经存在了；
另外，如果scrollHeight > offsetHeight即包含滚动部分的高度超出可视高度的时候，
滚动条即已出现。
综合上述两条可以得出以下结论：
if (dom.offsetTop > 0 || dom.scrollHeight > dom.offsetHeight) {
//滚动条已出现
}
当然，
是不是只有这两个条件可以判断滚动条是否存在呢？
如有朋友有更好的方法，可点击本文后面的“我要留言”给我留言，
感谢赐教～
js获得滚动条位置
注意body的使用
function getScroll()
{
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return { t: t, l: l, w: w, h: h };
}
获取浏览器垂直滚动条向下滚动的像素
关于js中 document.body.scrollTop 不能返回正确值的原因 收藏
本来是为了通过 document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，造成这样的原因和html的头部声明有关，如果头部声明 为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，这样肯定得到的结果是 0，如果该为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种
1、var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; }
2、用document.documentElement.scrollTop 替代 document.body.scrollTop
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
