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