scrollTop总是为0

Posted 2020-09-22 逆水行舟，心如止水。

如图，需要实现类似阅读完整个协议之后，我接受这个按钮才能被点击。

第一反应想到的是监听滚动，scroll

美滋滋的绑定事件，然后判断 ： 滚动的距离大于内部的高度减去外部的高度的时候就视为到达底部

scrollTop + divHeight >= scrollHeight

这里scrollTop指的是滚动的距离，可以理解为滚动条距离顶部的距离，

divHeight是父元素的高度，想要在父元素里滚动，当然子元素高度要大于父元素。

scrollHeight就是子元素的高度了

嗯，一切都很顺利，当到达底部的时候按钮被激活，隐藏这个协议框，然后继续下一步操作。

当我再次进这个页面的时候发现，协议还是在底部。导致这个问题有几个原因：

1.因为这个页面的协议是需要实时获取的，也就是每进一次这个页面我都需要去查询一下协议然后展示在协议框。

2.用户关闭协议框有两种可能，一是阅读完之后也就是滚动条下滑到底部之后，这时点击我已阅读是关闭协议框。二是用户之后点击叉叉。

现在问题发生的情况是在用户阅读完之后，再次进入这个页面时协议没有回到顶部。导致scrolltop一直是0，无法响应事件。

 

我以为是再次拉取协议数据的时候没有清空子元素的内容，然而并不是这个影响的，dom节点是重新渲染的。我一直以为只要节点重新渲染，

滚动距离就会自动重置即回到顶部。

 

解决方案：在我关闭协议框的时候，使用$(_pageId + ".allnewsin-side").scrollTop(0);手动让它滚动到顶部。然后。。。。就解决了。。。

 

本人不明白的地方：

滚动条的高度是父元素的属性吗？滚动条的长度是由内部子元素决定的，照理来说我改变子元素的内容，滚动条应该重置。然而并没有，是不是可以理解为其实

是作用在父元素上的