问题

很多网站都有类似「点击加载更多」的功能, 点击按钮后请求 ajax,然后在原列表后追加相关内容, 之前一直滚动条位置不变, 追加元素后, 页面还是列表原来的位置

但是今天发现, 追加元素后, 滚动条位置会自动滚动到「点击加载更多」按钮的位置, 这会造成浏览时很大的麻烦, 加载分页后, 还要往上滚动去找加载分页前的位置, 实在不方便

具体例子可以参考百度百科中的角色介绍的展开全部功能, 相关链接: https://baike.baidu.com/item/%E7%AC%91%E5%82%B2%E6%B1%9F%E6%B9%96/10719298#4

一系列的排查之后, 最终发现是浏览器的问题, 受影响的浏览器有Chromium内核的 v84和v85版本, 问题找到了, 就要看有没有相关解决方法

经过查找资料, 最终发现解决方法: css3 的 overflow-anchor 样式, 称之为滚动描点, 但是这个样式已经存在很多年了, 不知道什么原因直到现在才出现这个问题

overflow-anchor 有两个属性: auto 和 none

auto: 调整滚动位置时，该元素将成为潜在的锚点

none: 该元素将不会被选作潜在锚点

这个主要是为解决:当在网络缓慢的情况下浏览长页面, 因为图片或其他一些元素在内容中进一步加载, 正在查看的页面部分可能发出现突然跳动

解决

方法1: 点击按钮时, 加一个状态, 让按钮隐藏, 并添加一个相同高度的 loading 效果, 如:

<li className="page">
    {this.state.showMoreBtn ? (
        <Button type="primary" onClick={this.handleLoadMore}>
            加载下一页
        </Button>
    ) : (
        <Spin />
    )}
</li>

方法2: 在滚动条的容器上添加样式:

overflow-anchor: none;

一般加在 html 或者 body 上