摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程。
有時候在一個寬高固定的容器中,需要加載“更多內(nèi)容”,如果設(shè)置了overflow:auto,加載更多內(nèi)容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)“向左抖了一下”。效果如下:
先來復(fù)習(xí)一下overflow的幾個概念:
? ?overflow:visible? //默認(rèn)屬性,內(nèi)容超出顯示
overflow:auto //內(nèi)容不超出時無滾動條,內(nèi)容超出時才顯示滾動條
overflow:hidden? //內(nèi)容超出隱藏
overflow:scroll //不管內(nèi)容超不超出,滾動條常駐
在這里,我的內(nèi)容定位方式為:margin: 0 auto,這是因為滾動條出現(xiàn)后擠占了一部分位置,此時內(nèi)容是在除了滾動條的綠色區(qū)域居中的,但相對于紅色邊框的父容器中,是稍稍偏左的。如下:
特別注意一個問題:假如內(nèi)容的寬度是用百分比來寫的,那么計算時是不包括父容器的滾動條的。舉個栗子,父容器在這里寬度為400px,內(nèi)容寬度假如為80%,在沒有滾動條時,內(nèi)容寬度是320px。有滾動條時,內(nèi)容則變成了(400px - 滾動條寬度)* 80%,也就是說,內(nèi)容寬度此時要稍稍小于320px。
?
解決方案一:滾動條常駐(不完美但也還行)
滾動條常駐,或者滾動條消失,都是為了避免“滾動條從無到有”這個突發(fā)過程。當(dāng)然,一般是不會讓滾動條消失的,因為很容易會讓用戶以為沒有“更多內(nèi)容”或者“內(nèi)容到此為止了”,這個現(xiàn)象是不太合理的。讓滾動條常駐呢?不完美,但也可以接受。
設(shè)置父容器overflow-y:scroll,效果如下:
解決方案二:寫死容器及子元素的寬高定位(特別注意小屏設(shè)備)
既然用百分比來寫寬高,用auto來定位都會受到滾動條的影響,那么為了不受其影響,把所有東西都寫死不就行了,舉個栗子,現(xiàn)在容器400px,內(nèi)容320px,那么易得左邊距為(400px - 320px)/2。
內(nèi)容部分的css代碼如下:
最終效果如下:
可以看到已經(jīng)是達(dá)到要求了,內(nèi)容本身沒有左移。但是注意這里的父容器是寫定寬高的,在大屏電腦或者小屏筆記本寬度都是400px,如果父容器寬高又要隨著屏幕不同而動態(tài)改變,那這個margin-left就沒法定位到容器正中間了,除非先寫定寬高再做縮放。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/870.html
摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程?! ∮袝r候在一個寬高固定的容器中,需要加載更多內(nèi)容,如果設(shè)置了overflow:auto,加載更多內(nèi)容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下: 先來復(fù)習(xí)一下ov...
摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程。 有時候在一個寬高固定的容器中,需要加載更多內(nèi)容,如果設(shè)置了overflow:auto,加載更多內(nèi)容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下: 先來復(fù)習(xí)一下overflow的...
摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程。 有時候在一個寬高固定的容器中,需要加載更多內(nèi)容,如果設(shè)置了overflow:auto,加載更多內(nèi)容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下: 先來復(fù)習(xí)一下overflow的...
摘要:項目中遇到的問題,需要表頭固定,給表體設(shè)置滾動條,搜了很多種方法,也研究了一下。表頭放在中,表體放在中,給設(shè)置固定高度,加樣式,這樣在數(shù)據(jù)多的時候會出現(xiàn)滾動條,數(shù)據(jù)少的時候滾動條會消失。項目中遇到的問題,需要表頭固定,給表體設(shè)置滾動條,搜了很多種方法,bootstrap table也研究了一下。 下面是我們使用的方法。 表頭放在div1中,表體放在div2中,給div2設(shè)置固定高度,加樣式o...
閱讀 2113·2021-11-16 11:45
閱讀 1184·2021-10-22 09:53
閱讀 4002·2021-09-07 10:26
閱讀 1209·2021-09-06 15:00
閱讀 2073·2019-08-28 18:09
閱讀 2795·2019-08-26 14:06
閱讀 3934·2019-08-26 13:48
閱讀 1295·2019-08-26 12:11