关于scrollTop踩过的坑

scrollTop() 方法设置或返回被选元素的垂直滚动条位置。提示:当滚动条位于最顶部时,位置是 0。

当用于返回位置时:
该方法返回第一个匹配元素的滚动条的垂直位置。

当用于设置位置时:
该方法设置所有匹配元素的滚动条的垂直位置。

关于document.body.scrollTop总是为零的原因和解决方案:
1、各浏览器下 scrollTop的差异
IE6/7/8:
对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
Safari:
safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
Firefox:
火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;

解决办法:
页面指定了DOCTYPE时,使用document.documentElement。
页面没指定DOCTYPE时,使用document.body。
IE和Firefox都是如此。

完美的获取scrollTop 赋值短语 :

    let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在钉钉中获取scrollTop的值与不同浏览器有关。在IE6/7/8下,对于没有doctype声明的页面可以使用document.body.scrollTop来获取scrollTop的高度,对于有doctype声明的页面可以使用document.documentElement.scrollTop来获取。在Safari浏览器中,可以使用window.pageYOffset来获取scrollTop的值。而在Firefox等相对标准的浏览器中,可以直接使用document.documentElement.scrollTop来获取scrollTop的值。所以,为了完美地获取scrollTop的值,可以使用以下代码: var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 在开发过程中,如果无论是使用原生的scrollTop还是JQ的scrollTop获取到的值始终为0,很可能是因为DOCTYPE的问题。在DOCTYPE声明为<!DOCTYPE html>的情况下,获取scrollTop的值始终为0,而在DOCTYPE声明为<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">的情况下,可以正常获取scrollTop的值。 在滑动的过程中,可以根据event.touches.clientY <= 导航栏的高度来判断是否滚动到底部。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [获取不到scrollTop的问题](https://blog.csdn.net/weixin_34006468/article/details/88744865)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [仿钉钉左右滑动日历](https://blog.csdn.net/weixin_39963255/article/details/117737339)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值