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

回到相关文章 »

展示

  正午太阳高悬,上海松江,某处二本院校男生宿舍内,电风扇正在吱呀吱呀的旋转。

  仔细一听,还是能在风扇转动声外听到好些呼噜声……床铺凌乱外加大裤衩大背心,酷热的夏天,107男生宿舍内四位“帅哥”正在各自的床铺上酣睡。

  忽然之间,在上铺的陈慕睁开了眼睛,他如同做噩梦惊醒一般,直接是一个激灵就坐直了身子!

  “发生了什么?我不是被车给撞飞了?”

  直直的盯着窗外,陈慕脸上写满了惊恐和茫然。

  “我怎么会睡在这里?这是建桥大学?”

  在最初的愕然之后,陈慕开始看向周围。

  下铺是黄伟聪……红裤衩,排骨胸,还有那猥琐的长相,这正是他曾经大一的下铺舍友!

  远点的地方,冬子,超胜,这两个家伙也都是袒胸露乳,呼呼大睡……

  许铎和王子豪的床铺则是空着,这两货估计是一日既往的在肯德基蹭空调。

  自己的墙上挂着伊泽瑞尔的海报,冬子的头上则是他最喜欢的大幂幂……

  “我靠,我在做梦?”

  陈慕被吓了一跳,额头也有汗珠微微沁出,显然是在看到这熟悉的一幕后,内心泛起了滔天巨浪!

  陈慕狠狠的掐了一下自己的脸,确定自己是没有做梦,然后,他凭借着记忆,迅速的翻开枕头,在那里找到了自己在大一时用过的LG手机,上面的日期,正显示是2013年的6月28号!

  “我这是穿越重生了?”

  陈慕目瞪口呆,有些惊喜又有些蛋疼的苦笑起来……他是来自于17年的2月啊。

  他记得很清楚,国内的皮城守备和扭曲丛林开了单双排模式,身为代练的他通过上家是接到了一个肥单。

  他立马去那家熟悉的网咖通宵打单,打算一晚上就交单成功拿到酬金。

  谁想大晚上的流年不利,好几次对面都是硬茬外加己方智商下线,弄得他打完单出来已经是早上八点。

  累得不行的他,便下机回家。

  但在路过门口那条交通路时,没太注意红绿灯,被一辆车给直接撞飞在空中……

  他一瞬间便失去了意识,等再次苏醒的时候,已经是在这熟悉的107宿舍,回到了三年半之前!

  ……

  “竟然是重生!重新来到了2013年的大一!”

  稍微定了定心神,陈慕只觉得心情澎湃,酸甜苦辣似乎各种情绪都翻涌上来。

  但他毕竟常看网络小说,知道这种事就算再离奇,身为当事人,你也必须得很快就接受事实,好好振作起来!

  “不知道老天跟我是开了什么玩笑……不过,既然给我一次重生的机会,那前世的遗憾,我一定会一一弥补!”

  想着想着,陈慕就咬紧嘴唇也握紧了拳头,甚至仔细去看,还能发现他眼睛里竟然是有泪花在若隐若现。

  显而易见,他这四年肯定是有太多遗憾,整个人也活得特别失败……

  的确,这时候的他,虽然是在学校,可天天迟到早退旷课,早已不知道挂了多少学科;

  白天看小说晚上玩英雄联盟,除了几个宿舍的兄弟,他几乎和谁都不打交道,更别说是在这美女如云的大学找个妹子一起卿卿我我;

  大二上学期一来,固执的他索性就办理了退学手续,甚至为了电竞路,一时头脑发热和父母断绝关系;

  可惜他的职业路更是坎坷,打到大师后去LD战队招试训,却被人家用霸王合同欺骗,当了整整快一年韩国棒子的替补!

  好强的他并不服气,一边借酒消愁,一边更加努力的在rank训练;

  但命运再次跟他作对,他患上严重的腱鞘炎,连高分段都打得有些力不存心,更别说是卧薪尝胆再战职业;

  被LD俱乐部一毛钱工资没给直接清扫出门之后,他只能是租房子每日打打低分段单子混吃等死。

  本来以为这辈子他也就只有这点出息了……

  可命运还是跟他开玩笑,把他强行送回了快四年之前,那个群雄并起,电竞也迎来最佳黄金期的完美年代!

  完全可以料想到,以他在S6赛季还是大师段位的实力,再配以七个赛季看比赛和打rank的经验,以及对未来这几年内电竞史的了解,他绝对会轻而易举的成为英雄联盟电竞史上最强的王牌选手,或者是传奇教父!

  ……

  陈慕一阵唏嘘和激动。

  不过他还是平复了下心情,去按响手机,拨通了母亲的电话。

  如果说他前世什么遗憾最大,那毫无疑问,一定是自己的固执退学打职业和双亲断绝关系,让母亲每日以泪洗面在人前抬不起头……

  “喂,小慕,怎么知道给家里打电话了?不会是又没钱了吧?”

  母亲熟悉的声音响起,还带着点开玩笑的意思。

  但陈慕立刻就觉得嗓子像是被什么塞住,也有了流眼泪的冲动。

  其实,他前世一直想给父母道歉,想回到家中陪伴他们左右……

  可惜一直身为屌丝的他总是没机会,甚至连张回家的机票都买不起。

  “没事,妈,我不小心拨通电话了。”

  强忍着哽咽,陈慕缓缓说完,便不顾那头母亲的发愣,直接挂掉了电话。

  “妈,等着吧,我会让你为我而自豪的。”

  陈慕再次轻声呢喃,耳边,还响着几个舍友那震天响的呼噜声。

  ……

  收拾起对前世的怀念,陈慕的心思终于是来到了这一世。

  他大致一思索,这个时候能出人头地的机会太多……

  不说买股票炒房子,就光他买足彩,以他记得的那些球赛结果,都能让他成为千万富翁。

  但那又如何?

  上一世,他痴迷英雄联盟,打算投身电竞当一个职业选手,甚至为了这个梦想舍弃了所有的一切,他都不曾后悔。

  这一世,有了重生回来的资本,他如果还不想着在英雄联盟这块闯出赫赫威名,他就不是那个让学院院长都气晕的电竞狂人!

  “没有金手指……不过重生就是最大的金手指,我想想,这个时候是13年的7月,上海全明星刚结束,faker和他的skt开始崭露头角,国内omg强势崛起,厂长还没和we恩断义绝……”

  “斗鱼熊猫都没问世,直播平台只有YY,斗鱼三骚没出,miss在卖鼠标,小智还在出视频……”

  “至于国内rank,应该是段位刚分的国服三大腿时代,上古大神层出不穷……无状态和若风争雄国服第一!”

  背靠在宿舍墙上,吹着电风扇,陈慕又是激动起来,觉得这特么就是一个遍地黄金的年代!

  “LD俱乐部,前世你高薪请来草粉养老的韩媛,把我们当成你赚钱的工具……这一世,嘿嘿,我们走着瞧!”

  陈慕忽然是眸子里明亮起来,也又一次的握紧了拳头。

  毕竟在上一世,他之所以从一个一腔热血的电竞少年,变成不见天日的打单屌丝,几乎全是被那黑心俱乐部一手缔造……

  这个仇,陈慕他不能不报,也不能再让类似的悲剧发生在其他国内新星身上!

  “可是,这一切又该如何开始?开直播,吊打厂长uzi,登顶国服第一?”

  陈慕眯着眼寻思,开始在规划自己的“成神之路”。

  舍友还在酣睡,全然不知道他们那个熟悉的“青铜1小王子”,已然是有了挑战厂长uzi的想法!

  就在这个时候……

  一直没上锁的宿舍门,忽然被人推开。

  “兄弟们,是时候走起了!”

  有个浑厚的嗓音响起……不用看陈慕都知道,门口肯定是隔壁宿舍的大壮,一个同样痴迷英雄联盟的家伙。

  “我擦,还没养足精神啊!”

  “老哥你这嗓门太大了!”

  “起床!”

  这一个嗓音响起之后,随着一个高大个堵住了门口,从冬子到超胜再到黄站长,107寝室三人全部醒来。

  “咦,小慕你早醒来了?”

  睡眼惺忪的冬子,一眼就看到了坐在床上面带微笑的陈慕。

  “奇怪,你不是早上才睡的么?这么快就醒了。”

  黄站长也斜了下脑袋,表示郁闷,毕竟陈慕昨晚又去通宵“下分”了。

  “嘿,我睡好了……不过,你们这是要去哪来着?”

  陈慕强作镇定,摸摸脑袋,装一波糊涂,因为他真不知道大壮和107宿舍约了什么。

  “去哪?兄弟你睡糊涂了吧?”黄站长撇撇嘴,又傲然道:“天翼网咖战队赛,我们是报名了的,说好的一起去拿个冠军回来呢?”

  额。

  这么一说,陈慕立刻就想起来了。

  前世,貌似就是这时候,学校附近最大的天翼网咖,是举办了一个大型争霸赛。

  前几名不但有好几千的奖金,更有机械键盘鼠标相送,还会把获奖战队的海报照片贴在网吧门口,算是一个很大的露脸机会。

  学校里很多美女每天去商业街都路过网咖门口,如果107宿舍这帮单身狗真能打到前三闯出赫赫名声,啧啧……用黄站长的话说,从此以后***基本就不用靠手了。

  夺冠妙不可言不假,可问题的关键是,他们这帮家伙中,段位最高的也就是冬子,一区白银3。

  这种段位,想去网吧赛夺冠,无异于天方夜谭。

  如果陈慕没记错,当时应该是五个人兴致勃勃的去参赛,结果直接抽到了一个实力超级强悍的业余战队,被人家给十分钟就堵着虐泉了!

  而且那帮家伙暴虐外加嘲讽,让冬子几乎怀疑人生,从此以后对LOL都失去乐趣……

  现在看着黄站长和大壮冬子他们的兴奋劲,陈慕也是头疼,这帮家伙,还真是迷之自信!

  当然,放着重生回来的自己在,肯定不会让他们重蹈历史的覆辙。

  不就是个网吧赛?

  业余战队?

  嘿,要不,就拿他们小试牛刀,看看S3这个酒桶劫卡萨丁中路无敌的黄金年代,有没有人能打得过“来自S7”的他!

代码

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;
});