效果：

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/