先上個(gè)圖：

?布局很簡單，左右超過屏幕的部分自行滾動。

1. html

<div class="ce-container"><div class="ce-leftBox">//左邊的內(nèi)容</div><div class="ce-rightBox">//右邊的內(nèi)容 </div> </div>

?2.css

.ce-container {background: white;width: 100%;position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding-top: 50px; } .ce-container .ce-leftBox {float: left;width: 90px;height: 100%;border-right: 1px solid #F8F8F8;background: white;overflow-y: auto;text-align: center; } .ce-container .ce-rightBox {height: 100%;margin-left: 81px;overflow-y: auto;padding: 0 15px; }

說明重要點(diǎn)：

（1） container設(shè)置絕對定位top和bottom都要設(shè)置，再設(shè)置padding-top就能除開頭部返回欄鋪滿整個(gè)屏幕。

（2） 左右兩個(gè)盒子設(shè)置overflow-y:auto和高度100%，這樣就可以不用js來設(shè)置高度，讓div自行繼承高度，并且超過能滾動了。

（3）左邊盒子設(shè)置float，右邊的盒子設(shè)置margin-left就能達(dá)到左邊固定，右邊自適應(yīng)寬度的效果。這利用了float的破壞性，脫離文檔流。

?

實(shí)現(xiàn)點(diǎn)擊左邊，右邊滾動的思路：

在左邊點(diǎn)擊列表的時(shí)候，獲取當(dāng)前的索引值，然后，右邊再通過該索引值，獲取到對應(yīng)部分的offset.top值，然后再設(shè)置右邊div scrollTop就可以了。但是！！！問題就這樣出現(xiàn)了。。。先來看看最初版的js

$('.ce-leftBox').on('click','.ce-leftItem',function(){$(this).addClass('ce-lActive').siblings().removeClass('ce-lActive');var idx=$(this).index();var sTop=$('.ce-rightBox > .ce-rightItem').eq(idx).offset().top-50;//減50是去除頭部返回欄的高度$('.ce-rightBox').stop(true).animate({"scrollTop":sTop},400); })

?來看看初版效果：

a. 問題出現(xiàn)：

？？？為什么會錯(cuò)亂？？？當(dāng)沒有設(shè)置?$('.ce-rightBox').stop(true).animate({"scrollTop":sTop},400);?這條語句的時(shí)候，獲取到的sTop值是是正常的，但是加上這句話之后就出現(xiàn)了：點(diǎn)擊會計(jì)類，sTop是0；點(diǎn)擊工程類，sTop是321；點(diǎn)擊醫(yī)學(xué)類，sTop還是321？？？

b. 問題分析：

很明顯，就是這條語句影響了結(jié)果，那為什么呢？難道是div內(nèi)部滾動之后，會影響子元素獲取offset.top的值？

果然，當(dāng)?shù)谝淮吸c(diǎn)擊工程類的時(shí)候，右邊div滾動了，這時(shí)候sTop的值是321，正常的，然后我再次點(diǎn)擊工程類的時(shí)候，按道理來講，sTop應(yīng)該還是321，但是這時(shí)候，顯示的結(jié)果是0。為什么會出現(xiàn)這種情況呢？

c. 原因分析：

原來是這樣的

對于rightBox來說，它的頂部就是畫箭頭那點(diǎn)，那么當(dāng)它滾動的時(shí)候，獲取子元素offset.top的值即獲取距離父級頂部的位置大小，就是獲取子元素距離rightBox頂部的距離，所以當(dāng)?shù)谝淮吸c(diǎn)擊工程類，右側(cè)滾動之后，再次點(diǎn)擊工程類，獲取到sTop的值是0。

那為什么是0呢？那是因?yàn)?#xff1a;overflow-y 屬性規(guī)定是否對內(nèi)容的上/下邊緣進(jìn)行裁剪 - 如果溢出元素內(nèi)容區(qū)域的話。相當(dāng)于滾動的那部分被裁剪了，所以相當(dāng)于第一次滾動之后，工程類的頂部就是緊挨著父級的頂部的。所以第一次正確獲取，第二次已經(jīng)滾動到rightBox頂部，再去獲取就是0了。

d. 解決方案：

既然滾動的那部分被裁減不能算作內(nèi)容，那么我每次都去獲取滾動了多少，不就能正確獲取正常的sTop的值了嗎。最終版js

$('.ce-leftBox').on('click','.ce-leftItem',function(){$(this).addClass('ce-lActive').siblings().removeClass('ce-lActive');var idx=$(this).index();var sTop=$('.ce-rightBox > .ce-rightItem').eq(idx).offset().top-50;var nowScrollTop=$('.ce-rightBox').scrollTop();//當(dāng)前已經(jīng)滾動了多少$('.ce-rightBox').stop(true).animate({"scrollTop":sTop+nowScrollTop},400); })

?

最終效果圖：

這樣就正常了。。。

f. 擴(kuò)展分析

那為什么其它需求需要整個(gè)window滾動的時(shí)候，每次獲取到的offset.top都是正常的呢？？？我估計(jì)整個(gè)頁面的滾動都不是overflow-y裁剪的那種滾動吧

?

轉(zhuǎn)載于:https://www.cnblogs.com/zjjDaily/p/9300247.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。