scrollTop总是0的原因

最新推荐文章于 2023-06-06 15:38:56 发布
最新推荐文章于 2023-06-06 15:38:56 发布
阅读量8k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41143662/article/details/84304504
版权 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

页面此时才正常.
原来是这行东西造成IE无法获取document.body.scrolltop!
把顶部这两行删掉将可以了.但是为什么会这样呢?
google一下,发现改成:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

就可以了,但页面稍有变化，感觉不爽，于是又在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);
  document.body.scrollTop

要改成

  document.documentElement.scrollTop
侯六六
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端 html5 锁死不让滚动条滚动
06-13
重写ontouchstart ontouchmove 事件.达到锁死滚动条不让滚的目的 直接调用里面的方法就行.有注释
JS中完美兼容各大浏览器的scrolltop方法
10-24
最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的...
移动端Android真机上 scrollTop一直为0的解决方案
hzxOnlineOk的博客
05-25 883
确保html,body的高度为auto!!! 不能是100%
scrollTop滚动的时候一直是0
月落星河
01-31 1800
一次项目scrollTop的小记，为body添加了onscroll的时候scrollTop一直是0，使用下面的方法 // documentElement 属性以一个元素对象返回一个文档的文档元素 document.documentElement.scrollTop || document.body.scrollTop 只是针对于body的时候会是0，我直接写了个box，就可以直接使用，出现这个如果是body不能使用的原因是应该是没有选中 <!DOCTYPE html> <html lan
关于bom操作中的scrolltop（）获取值一直为0的问题解决
weixin_43989837的博客
10-29 521
问题描述： scrolltop（）获取值一直为0 解决方法： 1，确保ul上面 有over-flow：auto； 2，确保ul的父元素上面有over-flow：hidden，高度要固定 3，给ul元素使用scrolltop函数 $(’#listBox’).scrollTop() 例子： <div id="mescroll" class="mescroll" style="overflow: hidden;"> <ul class="ul-list" id="listBox" style=
scrollTop设置后一直为0
weixin_48469177的博客
10-16 285
scrollTop一直为0解决方案 解决方案 已解决
vue项目设置scrollTop不起作用(总结)
10-17
原因是滚动容器的值始终为0，无法被成功赋值。 解决方案： 1. 使用this.$nextTick()方法： 在Vue的生命周期中，直接在数据变化后立即操作DOM，此时DOM可能还未更新完成，导致无法获取到正确的值。通过this.$...
JS 获取滚动条高度示例代码
10-26
这样做的原因是不同浏览器可能会有不同的行为，尤其是在老版本的IE中，`scrollTop`可能存在于`document.body`而不是`document.documentElement`。 获取`scrollTop`的另一种方法是使用`window.pageYOffset`，这是W3C...
解决vue无法设置滚动位置的问题
10-17
这通常发生在尝试使用`document.body.scrollTop`来改变滚动条位置时，发现值始终无法更新或者保持为0。这个问题的根源在于HTML文档类型声明（DOCTYPE）的影响。 **问题描述** 在实现页面锚点定位或者动态滚动效果时...
vue使用keep-alive保持滚动条位置的实现方法
10-17
1. 在定义路由时，给需要保持滚动条位置的路由增加一个meta对象，并设置keepAlive属性为true以及初始的scrollTop值为0： ```javascript const routes = [ { path: '/somePath', component: SomeComponent, meta...
vue在初始化时给scrollTop设置一个值，但scrollTop却始终为0
daoxiaofei的博客
09-20 3224
在vue项目中往往有这样一个需求，在初始化时需要给某个容器的scrollTop设置一个值，一开始的想法是在created或者mounted中改变 scrollTop 的值，但是却出现了几个问题。 问题1：使用在created或者mounted中使用this.$refs.xxx获取不到容器 原因：在created或者mounted生命周期，页面刚挂载，还未完成渲染，获取不到dom节点。同样使用$ref无法获取样式。 解决方法：使用this.$nextTick() created () { this.$nex
scrollTop 一直未0
蚁族的奋斗的博客
09-18 116
https://www.jianshu.com/p/b0a39995b11f
【Vue】 scrollTop赋值一直为0
baidu_hxl的博客
07-08 5418
Vue项目中，给scrollTop赋值一直0，解决方案总结如下： mounted中：window设置scroll滚动事件 window.addEventListener('scroll', () => { this.scrollGroupSetting() }, false) destroyed中：移除scroll滚动事件 window.removeEventListener('scroll', this.scrollGroupSetting(true), false) 获取scro
js 获取滚动条位置 scrollTop总是0
weixin_43964271的博客
06-06 2270
由于页面导航栏是在页面中而非顶部固定的，所以需要在页面滚动到遮挡住导航栏的时候，在固定位置显示导航栏，我看网上案例类似的有页面向下滚动到一定位置的时候显示一键置顶的按钮等，都是类似的需求。改为①e.target.scrollTop获取div滚动位置；②addEventListener第三个参数设置成true，事件捕获，就可以实时获取div的滚动位置了。结果一直输出的是0，而且并不是一直监听，只输出几次；定义有滚动条的dev区域是box。
解决scrollTop值总为0
今晚吃火锅的博客
08-25 8465
scrollTop值为 0 近期作者在项目中遇到了一个问题。 项目内容大致是点击某些元素，进入到另外的页面。这里因为是h5页面，直接用的显示与隐藏的关系来进入其他页面。但是每次设置完display为none后，关闭进入的页面，回到首页后发现首页自动置顶了。于是参考其他博客说可以使用scrollTop设置 var windowsTop = document.body.scrollTop // 这里采用的是localstorage缓存，点击元素时储存这个windowsTop，然后在关闭页面时，将这个值赋给bod
解决vue的滚动条监听事件无效 解决vue的滚动条scrollTop距离总是为0无效问题
i_am_a_div的博客
12-30 3468
话不多说 直接上代码（方法可以直接复制拿去， html部分需要改成你的元素的ref和点击回到顶部的方法名称） html <section ref="scrollbox" class="inner-body"> <div> 这里放了很多内容 出现了滚动条 </div> </section> <button @click="gotop">点击置顶&
document.body.scrollTop总是零的原因
CaidChen的专栏
02-21 649
之前遇到了一个问题是由于document.body.scrollTop总是零的原因，郁闷了好久都没解决，查了才知是如下原因，以此告诫同样遇到此问题的兄弟姐妹。原来在HTML文件头部声明了这样一句：http://www.w3.org/TR/html4/loose.dtd">改成这样就好了：但页面稍有变化，感觉不爽，于是又在google里找，终于发现这是IE5与IE6的区别
VUE中`DOCUMENT.BODY.SCROLLTOP`的值总为零的解决办法
柠檬说葡萄你好酸
04-24 2076
最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。 页面没有DTD，即没指定DOCTYPE时，使用document.body。 IE和Firefox都是如此...
Vue 中让页面滚动到指定位置 scrollTop 为 0 或不生效可能的原因
weixin_44383533的博客
07-20 3855
注意⚠️并不是在你想滚动的元素上面设置ref是需要在你想滚动的父元素上面添加ref。注意要添加this.$nextTick否则元素可能会获取不到。否则可能ref会一直滚动不到你想滚动的位置。使用ref获取dom。...
scrollTop始终为0
最新发布
07-28
回答: 当scrollTop的值始终为0时，可能有几个原因。首先，要确保你设置滑动的是body元素而不是其他元素。因为当一个元素的display属性为'none'时，对该元素设置scrollTop属性是无效的。其次，要注意使用正确的语法来获取和设置scrollTop的值。在jQuery中，scrollTop是一个方法，不能直接使用('.propertyName').scrollTop来获取或设置值，而是应该使用('.propertyName').scrollTop(某值)的形式。另外，还要注意兼容性问题，不同浏览器可能对scrollTop的处理方式有所不同。如果以上方法都没有解决问题，可以尝试使用this.$nextTick()方法来设置scrollTop的值，如引用\[1\]所示。这个方法可以确保在DOM更新后再设置scrollTop，以避免出现值为0的情况。 #### 引用[.reference_title] - *1* *2* [【Vue】 scrollTop赋值一直为0](https://blog.csdn.net/baidu_35701759/article/details/107197214)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [解决scrollTop值总为0](https://blog.csdn.net/weixin_44835957/article/details/108222844)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值