获取滚动条位置documentElement.scrollTop和body.scrollTo

最新推荐文章于 2024-04-29 16:00:04 发布
最新推荐文章于 2024-04-29 16:00:04 发布
阅读量3.5k 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript 滚动条位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbknxy/article/details/45481063
版权

body.scrollTop获取body元素的的滚动条高度。而documentElement.scrollTop获取的是html的滚动条高度。有人说标准的w3c里body.scrollTop为0，所以获取滚动条值时要采用如下表达式:

<span style="font-size:24px;">var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;   (*)</span>

我也是菜鸟。

这里注意:   javascript里的||符号和C,C++,Java这类语言稍有不同，在javascript里它不仅可以作为逻辑运算，还可以作为我们熟悉的“三木运算”:例： a? b:c ;  

所以 ( * )处的 赋值语句的意思为:

<span style="font-size:24px;">var scrollHeight=document.documentElement.scrollTop ? document.documentElement.scrollTop:document.body.scrollTop</span>


lbknxy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document.documentElement && document.documentElement.scrollTop
10-30
document.documentElement && document.documentElement.scrollTop
document.documentElement document.documentElement.scrollTop
01-19
在标准的浏览器下，需要注意的东西，例如双击自动滚动 var diffY; if (document.documentElement && document.documentElement.scrollTop)     diffY = document.documentElement.scrollTop; else if (document.body)     diffY = document.body.scrollTop else     {/*Netscape stuff*/}
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此。 以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，
js中常用的查看 / 修改DOM元素宽高的属性
zhaoyapeng_的博客
03-02 2261
** js中常用的查看 / 修改DOM元素宽高的属性 ** 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollH
2022-07-14 工作记录--JS-实现含滚动条的页面向下滚动一定距离（上）—— scrollTo
weixin_48850734的博客
10-05 1200
JS-实现含滚动条的页面向下滚动一定距离（上）—— scrollTo
document.documentElement.scrollTop
weixin_44283589的博客
08-05 7192
在标准的w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;js中每个载入浏览器的HTML文档都会成为Document对象，documentElement 对应的是 html 标签，如果发现两个高度不一样，是css设置的问题，你的html高度不一定高于body。用body查看，其中clientHeight即为body的css高度，而不是：document.body.scrollTop;...
js点击返回顶部带过渡效果
y_19991024的博客
10-12 148
timer = setInterval(function() { if (document.documentElement.scrollTop <= 0) { clearInterval(timer); } window.scrollTo(0, document.documentElement.scrollTop - 100) }, 16.5) 定时器函数，没秒回100高度 ...
自定义滚动条
局外人LZ的博客
07-09 86
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"> <style> body{ margin: 0; padding: 0; } #scroll{ width: 5px;
document.body.scrollTop滚动失效
果果的博客
09-20 1967
先来说一下场景： 进入页面之后，需要页面滚动到指定的标签位置，但是如下设置之后，并没有什么效果 document.body.scrollTop=(0,300) 解决方案： let htmlDom = document.documentElement; htmlDom.scrollTo(0,300) 问题解决了，但是这2中写法有啥区别呢？咱们继续往下看： 1、什么是doc...
元素滑动到窗口指定位置
R_K_O的博客
11-09 168
【前端】元素滑动到窗口指定位置。
关于window.pageYOffset和document.documentElement.scrollTop
09-05
window.pageYOffset：Netscape属性，指的是滚动条顶部到网页顶部的距离
document.documentElement和document.body区别介绍
09-05
body是DOM对象里的body子节点，即body标签，documentElement 是整个节点树的根节点root，详细介绍请看本文，感兴趣的朋友可以参考下
关于js中 document.body.scrollTop 不能返回正确值的原因
netingcn
06-25 5528
本来是为了通过document.body.scrollTop来获取浏览器垂直滚动条向下滚动的像素，但是不管滚动条在什么位置总是返回是0，造成这样的原因和html的头部声明有关，如果头部声明 为：http://www.w3.org/TR/html4/loose.dtd">，这样肯定得到的结果是 0，如果该为就能得到正确的结果，对于第一种头部声明想要得滚动条的滚动的高度怎么办，解决方法有两种1、v
javascript滚动到顶部scrollTop用法
热门推荐
weixin_50367873的博客
04-14 2万+
首先了解下列相关属性 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高：
滚动条JS中document.body.scrollTop不起作用的原因
huashufengshizizhou的专栏
06-09 3175
<br />原来在HTML文件头部声明了这样一句：<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><br />改成这样就好了：<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />但页面中就忽略了margin的居中了，在google里查
获取body的滚动条长度一直是0的原因
XYLHxylh的博客
04-04 1915
1：要做一下兼容：document.documentElement.scrollTop || document.body.scrollTop 2：如果还不管用，你可以看一下是不是你的body已经设置了100vh高度，如果高度被定死了那说明1滚动条并不是body的，你应该查找其他元素。 ...
JS实现页面自动滚动
fugma的专栏
09-03 1084
页面自动滚动
返回顶部
lio-zero 的博客
05-12 265
锚点和平滑滚动 在 <html> 元素上提供以 ID 为目标的链接 <div id="top"></div> <a href="#top">跳转到页面顶部</a> 我们可以使用最新的 scroll-behavior 属性来实现 CSS 平滑滚动 html { scroll-behavior: smooth; } 查看效果 检测滚动位置：scroll 事件 使用 document.documentElement 返回文档的根元素，我们需要它
Babel 原理浅析
最新发布
qq_39454432的博客
04-29 813
Babel 原理浅析
优化一下这段代码//1、获取元素 var one = document.querySelector('.one') var two = document.querySelector('.two') //2、绑定滚动事件 window.onscroll = function () { //2-1，获取浏览器卷去的高度 var height = document.documentElement.scrollTop || document.body.scrollTop //2-2，判断卷去的高度 if (height >= 300) { //显示 two.style.display = 'block' } else { //隐藏 two.style.display = 'none' } } //3，绑定点击事件 two.onclick = function () { //3-1，让页面滚动回到顶部 window.scrollTo({ top: 0, behavior: 'smooth' }) }
06-03
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 2-2、判断卷去的高度 if (scrollTop >= 300) { // 显示 $('.two').style.display = 'block' } else { // 隐藏 $('....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值