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

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量3.1k 收藏
点赞数
文章标签： 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
    评论
HTML中 scrollTop++ 不能够实现div向上滚动的原因
chenfengstrong的专栏
07-08 6096
假设有三个层，id分别是：demo,demo1,demo2,包含关系如下：即，demo 包含demo1和demo2; HTML代码：  div id="demo" style="background-color:#ff0000; width:500px;height:200px;overflow: hidden;" >                  div id="demo1"
js监听scrolltop_js-scroll判断页面是向上滚动还是向下滚动
weixin_42508241的博客
12-31 1603
原理：那当前的scrollTop和之前的scrollTop对比如果变大了，表示向下滚动(scrollTop值变大)；如果变小了，表示向上滚动(scrollTop值变小)。方法一：js代码：$(document).ready(function(){var p=0,t=0;$(window).scroll(function(){p=$(this).scrollTop();if(t}else{//上滚}...
vue项目设置scrollTop不起作用(总结)
10-17
主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
（react）设置scrollTop无效的原因及解决方法
weixin_51719919的博客
03-11 1万+
一、项目的需求描述 不停的请求后端日志，输出到页面上，当用户不做任何操作时，动态显示日志，即放日志的盒子里面内容滚动到最底部；当用户触发了滚动事件查看历史日志时，盒子不再滚动到最底部，随着用户的滚动显示对应的日志，且确保不会中断请求日志，当用户再次滚动到页面最底部并且不再做任何操作时候，再次实现盒子里面内容动态滚动到最底部（类似聊天界面，只要你不翻看聊天记录，就会滚动显示最新消息） 二、设置scrollTop的方法 1. 原生 HTML 中使用 JS 直接修改 方法一：使用scrollTo函数来设置滚动条的
document.documentElement.scrollTop指定位置失效解决办法
weixin_30949361的博客
08-29 3338
近期在vue的H5项目中，做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效。 解决办法是document.documentElement.scrollTop改成document.body.scrollTop； 如果是PC端项目，则使用document.documentElement.scrollTop。 转载于:http...
获取滚动条位置documentElement.scrollTop和body.scrollTo
lbknxy的专栏
05-04 3572
获取滚动条位置documentElement.scrollTop和body.scrollTo 以及||符号的作用
元素滚动到底部或顶部时阻止body滚动
bluelotos893的博客
08-22 953
移动端的弹窗内容有滚动条，滚动到底部或顶部时或影响弹窗下的body滚动，某些浏览器滚动到顶部时不松手就触发了刷新页面的情况，如果不需要这样的默认体验，就需要加一下判断了。 var startX,startY,endX,endY,distanceX,distanceY;//判断容器的滑动方向 //判断元素滑到底部时阻止滑动body,使用时传入局部滚动的选择器即可 ...
解决VUE中document.body.scrollTop为0的问题
12-09
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定...
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 元素顶部到...
用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`和`...
js 设置scrollTop失效问题
weixin_43907110的博客
04-27 1007
在vue element 的弹框里面想要通过设置scroll控制弹框体滚动一直失效问题。目测应该是做滚动操作的时候窗口没有撑开，还没有拿到高度所以滚动失败，搞了我好久啧。前提：元素的overflow-y: scroll;这段代码一直不生效，后来改为一下写法就可以了。
记录一次scrollTo和scrollBy不生效的原因
苏一恒
03-22 515
至于是哪个滚动, 打开开发者工具, 在 more tools 里找到 layers, 图层里找到滚动列表里最长的元素,scrollTo 要设置到滚动的元素上, 不一定是父元素, 也不一定是 window 啥的.发现所有文章都没说到点子上, 简单记录下.然后,找到这个元素,对他设置滚动即可.
scrollTo() 无效问题处理
Kratial的博客
02-02 6433
scrollTo无效问题处理
解决移动端scrollTo({behavior: “smooth“})滑动效果失效的问题
liucai1018的博客
05-14 7193
js自带的scrollTo方法可以设置动画，滚动的效果，代码在电脑上正常，但是在手机上的时候就没有smooth的滑动效果了，只能僵硬的跳到某个位置，类似scrollTop赋值的效果，这里从一个博客看到的一个解决办法，试了下确实可以，所以记录一下： 首先安装这个插件：smoothscroll-polyfill npm install smoothscroll-polyfill --save 然后引入并在组件创建的时候调用下这个方法：比如mounted中 import smoothscroll fr
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; 网页被卷去的高：
JavaScript：scroll() / scrollTop() / scrollBy()无效？
aozhe9623的博客
06-25 880
*note 　　使用的浏览器：Chrome（67.0.3396.87）/ 火狐（60.0.2）/ IE（ie7和ie8），均为PC端。 · 示例 <script> window.scroll(0, 200); </script>　　 　　1. 表现结果 　　　　Chrome：只有第一次打开标签页面是有效的（在当前标签页不断刷新是...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 2746
title>充电效果
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、付费专栏及课程。

余额充值