滚动条JS中document.body.scrollTop不起作用的原因

最新推荐文章于 2024-02-28 11:02:30 发布
最新推荐文章于 2024-02-28 11:02:30 发布
阅读量3.2k 收藏
点赞数
文章标签： html google
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huashufengshizizhou/article/details/5657163
版权

原来在HTML文件头部声明了这样一句：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

改成这样就好了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
但页面中就忽略了margin的居中了，在google里查找发现可以使用下列代码解决：

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;
}
alert(scrollPos);

一切OK.

document.body.scrollTop
要改成
document.documentElement.scrollTop

huashufengshizizhou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
document.body属性.document.body.scrollTop
04-18
`document.body.scrollTop` 是 `document.body` 对象的一个属性，它用于获取或设置浏览器窗口中 `<body>` 元素顶部到视口顶部的距离，即滚动条滚动了多少像素。这个属性在处理页面滚动和动态布局时非常有用，尤其在...
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
12-10
在网页开发中，我们经常需要处理滚动条相关的事件，例如固定元素的位置或者根据滚动条位置进行某些动态效果。`document.body.scrollTop` 是一个常见的 JavaScript 属性，用于获取或设置 HTML 文档中 body 元素顶部到...
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
document.body.scrollTop与document.documentElement.scrollTop兼容
tudusi
11-25 304
document.body.scrollTop与document.documentElement.scrollTop兼容 这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！ 看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标...
document.documentElement.scrollTop指定位置失效解决办法
weixin_30949361的博客
08-29 3338
近期在vue的H5项目中，做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效。 解决办法是document.documentElement.scrollTop改成document.body.scrollTop； 如果是PC端项目，则使用document.documentElement.scrollTop。 转载于:http...
解决VUE中document.body.scrollTop为0
热门推荐
柠檬说葡萄你好酸
01-13 1万+
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DO
scrollTop不生效的解决办法
最新发布
ToKeepCalm的博客
02-28 1388
例如：document.getElementById('logContainer')中的。你设置的是另一个元素的滚动条，和你需要设置的滚动条有什么关系，所以导致滚动条不会生效。scrollTop不生效可能的原因有多个，请挨个进行排查！确定你设置滚动条的元素ID是否正确且唯一。，该ID是否唯一，若不唯一，则可能导致滚动条不生效（可能很多人有疑问了，这还能有错？
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
由document.body和document.documentElement想到的
09-06
1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度，不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...
document.body.scrollTop用法
12-16
document.body.scrollTop用法
（react）设置scrollTop无效的原因及解决方法
weixin_51719919的博客
03-11 1万+
一、项目的需求描述 不停的请求后端日志，输出到页面上，当用户不做任何操作时，动态显示日志，即放日志的盒子里面内容滚动到最底部；当用户触发了滚动事件查看历史日志时，盒子不再滚动到最底部，随着用户的滚动显示对应的日志，且确保不会中断请求日志，当用户再次滚动到页面最底部并且不再做任何操作时候，再次实现盒子里面内容动态滚动到最底部（类似聊天界面，只要你不翻看聊天记录，就会滚动显示最新消息） 二、设置scrollTop的方法 1. 原生 HTML 中使用 JS 直接修改 方法一：使用scrollTo函数来设置滚动条的
回到网页顶部的document.body.scrollTop与document.documentElement.scrollTop兼容问题
weixin_33768481的博客
05-30 130
最经开发个网页时，做了一个回到顶部的特效，用document.documentElement.scrollTop判断是否大于0，做滚动了的判断，发现在IE和firefox上都正常，但是在世界之窗极速版（ chrome内核）却显示不了，做了好多工作，终于给我找着了，如下： 标准浏览器是只认识documentElement.scrollTop的，但chrome却不认识...
document.body.scrollTop滚动失效
果果的博客
09-20 2043
先来说一下场景： 进入页面之后，需要页面滚动到指定的标签位置，但是如下设置之后，并没有什么效果 document.body.scrollTop=(0,300) 解决方案： let htmlDom = document.documentElement; htmlDom.scrollTo(0,300) 问题解决了，但是这2中写法有啥区别呢？咱们继续往下看： 1、什么是doc...
document.body.scrollTop无效的解决方法
做个好的手艺人
06-07 2160
document.body.scrollTop获取或设置网页滚动的高度。   在firefox下面无论滚动条滚动多少，得到的值总为0,郁闷吧？？？ 后来发现是我页面头部设置的在原因： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1...
微信body和弹出层都有滚动条，overflow:auto失效解决方案。
zhaozilong666的博客
08-06 1651
1. 禁止body滚动后，弹出层滚动overflow:auto失效； var DivScroll = function( layerNode ){         //如果没有这个元素的话，那么将不再执行下去         if ( !document.querySelector( layerNode ) ) return ;         this.popupLayer = docume...
vue控制滚动条位置 document.body.scrollTop=0 document.documentElement.scrollTop=0 各种表达式都是0 解决方案
zdreamLife的博客
04-25 926
查阅了网上各种原因，都是什么浏览器版本之类的问题，反正我试了都不行。 document.body.scrollTop=0 document.documentElement.scrollTop=0 各种生命周期中试了没用反正取到的值都是0 也不变化！ 尝试了快要秃头的时候我想了一下，可能这个scrollTop不在body不在document层级。我说一下我的解决思路 这个展现的是已经包含的，如果获去的是这个元素的父级元素的scrollTop 可能就是0，这个结论不敢确定，可能跟封装的框架有关。未详细研究。
vue 中监听document.body.scrollTop 值总为0的解决方法
yw1376394716的博客
06-11 1万+
最近在vuex项目中碰到了这个问题，监听页面滚动时 document.body.scrollTop一直都是0，捣鼓了好久最后找到了几个解决方法 方法一：浏览器兼容有问题 写个兼容方法就行 // chrome || firefox || IE： // document.documentElement.scrollTop document.body.scrollTop // safari: window.pageYOffset let scrollTop= document.documentEleme
vue中使用window.pageYOffset document.documentElement.scrollTop document.body.scrollTop滚动时 值都为0 怎么解决
06-09
在 Vue 中，如果您希望获取窗口的滚动位置，可以使用 `window.pageYOffset` 或者 `document.documentElement.scrollTop`，这两个属性在现代浏览器中已经被广泛支持使用。 如果这些属性的值始终为0，可能是因为您的页面内容没有超出窗口的高度，导致无法滚动。您可以尝试在页面中添加更多内容，或者在样式中添加 `overflow-y: scroll` 或 `overflow-y: auto` 来强制显示滚动条。同时，确保您的代码在 Vue 实例的 `mounted()` 或者 `updated()` 生命周期钩子函数中运行，以确保 DOM 元素已经被渲染完毕。 如果您的问题仍未解决，请提供更多的信息或者代码，我会尽力帮助您解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值