为什么scrollTop设置后一直为0的解释和解决方案（精品）

ゞ浴缸里的玫瑰 2022-12-01 14:29 181阅读 0赞

我个人做一点补充，当使用第三方ui库（比如antd-mobile）的时候，要主要看下Flex.Item的样式，默认是overflow: hidden，这会导致scrollTop的值一直为0！

## 下面的部分引用自这位博主[https://blog.csdn.net/kouryoushine/article/details/99745904][https_blog.csdn.net_kouryoushine_article_details_99745904] ##

## 背景 ##

做前端希望页面能跳转到 某一位置用到了scrollTop属性。可是发现给某个div设置该属性后，一致为0。找了很多方案，但不都适合自己，或者说不知道是否适合。

## Why scrollTop==0? ##

总而言之，所有情况都是因为**你给一个没有滚动条的元素设置滚动条**的位置。

## 什么时候存在滚动条？ ##

页面布局我们可以简单理解为 div盒子套div盒子。当内侧div盒子的高度大于外部时，外部的div就会出现滚动条。此时外部的div才具备scrollTop属性，否则你无论如何设置都为0.  
这里隐藏了一些条件：

1.  外部的div一定有高度，否则外部div将和内部div高度一致，不满足大于条件，所以不会出现滚动条。
2.  外部div的 overflow：auto。hidden的情况下超出的部分被隐藏，无法出现滚动条。

> 如果想设置滚动条属性，一定要知道滚动条是哪个div产生的。

## 如何判断页面的滚动条是哪个div产生的？ ##

1.  依次检查页面父元素和子元素的div的height和overflow属性。如果两个高度一样就不可能产生滚动条。当发现上层div高度小于下层时，父元素就可能是产生div的元素。
2.  观察页面滚动条滚动到最上方的位置，滚动条最高点不会超出产生它的div的最高点。通常body产生的滚动条会贯穿整个屏幕。

## 场景1：如何删除body的滚动条，保留某个div的滚动条 ##

body{overflow:hidden;}
    
    div{
    height:xxpx;    #小于子元素的高度
    overflow-y:auto;
    }

## 场景2：documentElement.scrollTop或者document.body.scrollTop 一直为0的情况 ##

产生根本原因还是因为给没有scrollTop的元素设定了该值，直接原因是因为浏览器兼容问题。

document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

解决方法：在上面三个元素中逐一尝试，总有一款可以设置上。

## 附加： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

[https_blog.csdn.net_kouryoushine_article_details_99745904]: https://blog.csdn.net/kouryoushine/article/details/99745904
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20221123/358aa1b22c434e47a2bd41ffe9df8f2c.png