爲什麼不在移動webkit的html標記上溢出滾動？

這裏是一個簡單的html文檔，其中有一個div由於水平轉換而將文檔向右溢出。但是因爲overflow設置爲隱藏在html標籤上，所以我期望沒有滾動條。谷歌瀏覽器就是這種情況，但是當我在移動webkit或移動Safari瀏覽器中加載此文檔時，我可以滾動。這是一個錯誤？我怎樣才能解決這個問題？爲什麼不在移動webkit的html標記上溢出滾動？

<html> 
<head> 
    <title>test</title> 
    <style type="text/css"> 
    html { 
     background: lightgray; 
     overflow: hidden; 
    } 
    .test { 
     width: 100%; 
     -webkit-transform: translate3d(90%, 0, 0); 
     height: 100px; 
     background: grey; 
    } 
    </style> 
</head> 
<body> 
<div class="test"></div> 
</body> 
</html>

要重現該問題，您可以在移動Safari或移動webkit中打開此鏈接。您也可以通過打開chrome開發工具並啓用設備度量覆蓋來模擬移動設備來重現它。 https://dl.dropboxusercontent.com/u/78736800/overflowscrollbug.html

來源

2013-10-16 justspamjustin

您還應該隱藏body的溢出。我跑了一個快速測試，這在移動Safari中取得了訣竅：

<style type="text/css"> 
html, body { 
    background: lightgray; 
    overflow: hidden; 
} 
.test { 
    width: 100%; 
    -webkit-transform: translate3d(90%, 0, 0); 
    height: 100px; 
    background: grey; 
} 
</style>

來源

2013-10-17 01:19:47

爲什麼不在移動webkit的html標記上溢出滾動？

回答

相關問題