滚动容器尺寸变化时候最上方元素位置不变实例页面

效果：

CSS代码：

.box { width: 70%; height: 600px; border: 1px solid #eee; overflow: auto; }
.box p { margin: 0; padding-bottom: .667rem; }

HTML代码：

<div id="box" class="box">
    <p>　　正午太阳高悬，上海松江，某处二本院...</p>
</div>

JS代码：

var eleBox = document.getElementById('box');

if (!document.elementsFromPoint) {
    document.elementsFromPoint = document.msElementsFromPoint;
}

// 当前最靠近滚动容器上边缘的元素
var targetEle = null;
// 最上边元素和滚动容器上边缘的偏移大小
var topPOffset = false;
/**
* 存储滚动时候最上边缘元素以及偏移大小
*/
var funStorePos = function () {
    var bounce = eleBox.getBoundingClientRect();
    var pointX = bounce.left + eleBox.clientWidth / 2;
    var pointY = bounce.top + 1;

    targetEle = document.elementsFromPoint(pointX, pointY)[0];

    if (targetEle == eleBox) {
        topPOffset = false;
        return;
    }

    topPOffset = Math.round(targetEle.getBoundingClientRect().top - bounce.top);
};

// 滚动时候记录此时最上边缘元素
eleBox.addEventListener('scroll', funStorePos);

// 尺寸变化时候实时修正滚动位置，使最上边缘元素永远在上边缘
window.addEventListener('resize', function () {
    if (topPOffset === false) {
        return;
    }

    var scrollTop = eleBox.scrollTop;
    // 之前最靠近边缘元素当前的偏移等
    var currentTopPOffset = Math.round(eleBox.getBoundingClientRect().top) - Math.round(targetEle.getBoundingClientRect().top);
    // 滚动修正
    eleBox.scrollTop = scrollTop - currentTopPOffset - topPOffset;
});

本文出自张鑫旭大神，特别喜欢这篇文章。
原文地址：http://www.zhangxinxu.com/wordpress/2018/02/container-scroll-position-hold/