移動(dòng)端overflow失效問(wèn)題

chenatu 發(fā)布于2019-08-29 14:09 / 2145人閱讀

摘要：在項(xiàng)目開(kāi)發(fā)中，我們有時(shí)候需要實(shí)現(xiàn)元素從屏幕外移動(dòng)到屏幕內(nèi)的效果。問(wèn)題但是如果你的頁(yè)面是移動(dòng)端頁(yè)面的話，你會(huì)發(fā)現(xiàn)有時(shí)候會(huì)出現(xiàn)失效的問(wèn)題。出現(xiàn)這樣的問(wèn)題一般是因?yàn)槟愕脑厥窍鄬?duì)于移動(dòng)的，這樣的情況在移動(dòng)端就會(huì)出現(xiàn)問(wèn)題。

在項(xiàng)目開(kāi)發(fā)中，我們有時(shí)候需要實(shí)現(xiàn)元素從屏幕外移動(dòng)到屏幕內(nèi)的效果。

我們一般會(huì)有這樣的方案：
先通過(guò)position: absolution或transform: translate() 使得元素移動(dòng)到屏幕之外，然后給父元素添加overflow: hidden屬性禁止?jié)L動(dòng)，在給元素加過(guò)渡或動(dòng)畫(huà)，使它移動(dòng)進(jìn)來(lái)。

問(wèn)題

但是如果你的頁(yè)面是移動(dòng)端頁(yè)面的話，你會(huì)發(fā)現(xiàn)有時(shí)候會(huì)出現(xiàn)overflow:hidden失效的問(wèn)題。
出現(xiàn)這樣的問(wèn)題一般是因?yàn)槟愕脑厥窍鄬?duì)于body移動(dòng)的，這樣的情況在移動(dòng)端就會(huì)出現(xiàn)問(wèn)題。

解決方法

如果你必須相對(duì)于body進(jìn)行定位，可以給body加上width: 100% ; height: 100%; position: fixed來(lái)解決，這種方法就是利用了fixed定位的特點(diǎn)，使得body相對(duì)于屏幕定位，自然就無(wú)法滾動(dòng)了。但這種方法的缺點(diǎn)也很明顯，就是無(wú)論y軸還是x軸方向都無(wú)法滾動(dòng)了，如果你只想禁止一個(gè)方向的滾動(dòng)，那這種方法就不適合了。

盡量不要相對(duì)于body進(jìn)行定位，而是給他加一個(gè)父元素，然后相對(duì)于父元素進(jìn)行定位（一般給父元素添加position：relative）,再給父元素加上overflow:hidden 或 overflow-x：hidden 或 overflow-y：hidden來(lái)解決。