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
分享到：
相关推荐
- `scrollTo(top, duration)`：滚动到指定位置，`top` 为像素值，`duration` 为动画时长，单位为毫秒。 - `stop()`: 停止当前的滚动动画。 例如，要滚动到底部，可以这样写： ```javascript $('.scroll-pane')....
### div随着滚动条滚动，但是到了顶部，便不随着滚动了 #### 背景介绍 在网页设计中，有时我们需要让某个元素（如`<div>`）在页面滚动时保持固定的位置，或者达到特定位置后固定不动。这种效果常用于导航栏、侧边栏...
为了更准确地判断页面是否有垂直滚动条，我们需要从offsetHeight中减去4个像素（考虑到浏览器边框通常为2像素，双侧共4像素）： ```javascript if (document.documentElement.clientHeight ) { // 存在垂直滚动条...
// 当前滚动条位置 var elementTop = element.offset().top; // 元素相对于文档顶部的位置 if (windowTop > elementTop && windowTop > topOffset) { element.css('position', 'fixed').css('top', '0'); // ...
在网页设计中，有时我们需要创建一种特殊的广告展示方式，即“不随滚动条滚动的固定层广告”。这种广告设计能够始终出现在用户视野中，无论页面如何滚动，它都会固定在屏幕的某个位置，如顶部、底部或侧边栏。本文将...
这个插件的核心是通过计算滚动条位置和侧边栏顶部距离来决定何时切换侧边栏的定位方式。当用户向上滚动并使侧边栏顶部出现在视口上方时，侧边栏会被固定在顶部；当用户向下滚动，侧边栏顶部回到视口内，侧边栏恢复为...
1. **获取滚动条位置**： 在JavaScript中，可以通过`window`对象或者`document`对象的属性来获取滚动条的位置。`scrollTop`表示滚动条顶部距离页面顶部的距离，`clientHeight`代表视口的高度，`scrollHeight`则是...
在Vue.js移动端开发中，有时我们需要监听滚动条的高度来实现特定的交互效果，例如当用户滚动到页面的一定位置时，头部导航栏变为固定定位。本文将详细介绍如何在Vue中实现这种功能。 首先，我们需要知道在...
`park`变量是`<h2>`元素的顶部距离页面顶部的距离减去当前滚动位置，如果这个值小于350且大于0，表示`<h2>`元素正在视口内，因此对应的菜单项应被高亮。 总的来说，这个例子展示了如何使用jQuery结合HTML和CSS来...
通过比较这个值，我们可以判断用户是否已经滚动到需要显示导航条的位置。 接下来，考虑导航条中的元素可能需要左右浮动，我们可以使用`float`属性。`float: left`会让元素向左浮动，`float: right`则向右浮动。例如...
本文将详细介绍如何利用Vue.js实现一个歌手列表，该列表能够根据字母顺序进行排序，并且在用户通过下拉滚动条进行滚动时，侧栏的排序标签能够实时更新。这个实现方法对前端开发人员来说具有一定的参考价值。 首先，...
当距离小于预设值时，它会改变导航条的CSS样式，添加一个固定定位（fixed position），并调整其位置，使其始终位于视口顶部。当用户向上滚动返回到导航条原来的位置时，stickUp会恢复其原始样式，使之回到文档流中。...
通常会根据document.documentElement.clientHeight（浏览器窗口高度）减去该元素初始的垂直位置（oDiv），得到一个静态的值，然后在滚动事件中增加或减少这个值，这样就能实现视觉上元素随滚动条滚动的效果。...
当页面发生滚动时（包括窗口的滚动和滚动条的滚动），通过计算窗口高度和侧边栏高度得到一个中间值作为目标位置。定时器以固定间隔更新侧边栏的位置，直至侧边栏到达计算出的目标位置。 3. 运算技巧与注意事项： 在...
页面可视区域是指用户在不滚动的情况下能看到的页面部分，包括顶部、底部、左右两侧的滚动条所占用的空间。JavaScript可以通过`window.innerWidth`和`window.innerHeight`来获取这个区域的宽度和高度。这两个属性...
`：计算需要移动的像素值。 12. `followObj.style.left=followObj.offsetLeft+dx;`：更新元素的`left`属性，实现移动效果。 #### 实现细节及注意事项 - 在`addItem`方法中，可以通过修改传入的`id`、`x`、`y`、`...
88. **scrollTop**: 获取垂直滚动条的滚动位置。 89. **borderColor**: 边框颜色，元素的边框颜色属性。 90. **fontSize**: 字体大小，CSS中的字体大小设置。 91. **className**: 类名，CSS类选择器。 92. **...
根据提供的文件信息，可以看出这部分代码并非CSS相关的学习资料，而是涉及JavaScript及jQuery的代码片段，主要功能似乎是异步验证表单元素的值，并基于服务器返回的数据动态生成HTML内容（如：选项列表）。...
- **说明**: 控制当对象获得焦点时是否显示视觉指示器。通常用于改进用户体验。 **20. HSPACE (hspace)** - **功能**: 设置或获取对象的水平边距。 - **语法**: `hspace: [length-value]` - **说明**: 用于定义...