成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決滾動條突然出現(xiàn)導致的頁面錯位問題

hedzr / 1508人閱讀

摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程。

有時候在一個寬高固定的容器中,需要加載“更多內容”,如果設置了overflow:auto,加載更多內容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)“向左抖了一下”。效果如下:

先來復習一下overflow的幾個概念:

? ?overflow:visible? //默認屬性,內容超出顯示

overflow:auto //內容不超出時無滾動條,內容超出時才顯示滾動條

overflow:hidden? //內容超出隱藏

overflow:scroll //不管內容超不超出,滾動條常駐

在這里,我的內容定位方式為:margin: 0 auto,這是因為滾動條出現(xiàn)后擠占了一部分位置,此時內容是在除了滾動條的綠色區(qū)域居中的,但相對于紅色邊框的父容器中,是稍稍偏左的。如下:

特別注意一個問題:假如內容的寬度是用百分比來寫的,那么計算時是不包括父容器的滾動條的。舉個栗子,父容器在這里寬度為400px,內容寬度假如為80%,在沒有滾動條時,內容寬度是320px。有滾動條時,內容則變成了(400px - 滾動條寬度)* 80%,也就是說,內容寬度此時要稍稍小于320px。

?

解決方案一:滾動條常駐(不完美但也還行)

滾動條常駐,或者滾動條消失,都是為了避免“滾動條從無到有”這個突發(fā)過程。當然,一般是不會讓滾動條消失的,因為很容易會讓用戶以為沒有“更多內容”或者“內容到此為止了”,這個現(xiàn)象是不太合理的。讓滾動條常駐呢?不完美,但也可以接受。

設置父容器overflow-y:scroll,效果如下:

解決方案二:寫死容器及子元素的寬高定位(特別注意小屏設備)

既然用百分比來寫寬高,用auto來定位都會受到滾動條的影響,那么為了不受其影響,把所有東西都寫死不就行了,舉個栗子,現(xiàn)在容器400px,內容320px,那么易得左邊距為(400px - 320px)/2。

內容部分的css代碼如下:

最終效果如下:

可以看到已經是達到要求了,內容本身沒有左移。但是注意這里的父容器是寫定寬高的,在大屏電腦或者小屏筆記本寬度都是400px,如果父容器寬高又要隨著屏幕不同而動態(tài)改變,那這個margin-left就沒法定位到容器正中間了,除非先寫定寬高再做縮放。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://systransis.cn/yun/777.html

相關文章

  • 解決滾動突然出現(xiàn)導致頁面錯位問題

    摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程?! ∮袝r候在一個寬高固定的容器中,需要加載更多內容,如果設置了overflow:auto,加載更多內容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下:      先來復習一下ov...

    617035918 評論0 收藏0
  • 解決滾動突然出現(xiàn)導致頁面錯位問題

    摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程。 有時候在一個寬高固定的容器中,需要加載更多內容,如果設置了overflow:auto,加載更多內容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下: 先來復習一下overflow的...

    timger 評論0 收藏0
  • 解決滾動突然出現(xiàn)導致頁面錯位問題

    摘要:而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐,或者滾動條消失,都是為了避免滾動條從無到有這個突發(fā)過程。 有時候在一個寬高固定的容器中,需要加載更多內容,如果設置了overflow:auto,加載更多內容時,子元素的大小超過父容器,就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn),會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下: 先來復習一下overflow的...

    Faremax 評論0 收藏0
  • 表頭固定,表主體設置滾動,同時解決錯位問題

    摘要:項目中遇到的問題,需要表頭固定,給表體設置滾動條,搜了很多種方法,也研究了一下。表頭放在中,表體放在中,給設置固定高度,加樣式,這樣在數(shù)據(jù)多的時候會出現(xiàn)滾動條,數(shù)據(jù)少的時候滾動條會消失。項目中遇到的問題,需要表頭固定,給表體設置滾動條,搜了很多種方法,bootstrap table也研究了一下。 下面是我們使用的方法。 表頭放在div1中,表體放在div2中,給div2設置固定高度,加樣式o...

    nanchen2251 評論0 收藏0

發(fā)表評論

0條評論

hedzr

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<