浮層滾動問題

使用positiontransform實現從右邊滑出的 h5 浮層效果，但在手機瀏覽器上左右滑動時，頁面產生了左右滾動條，浮層也出來了。這是問題頁面，移動端訪問如下：

這個現象不應該出現，問題好解決，但為什麼會這樣？想了一下，好像知道相關點，但又講不清，所以在此梳理一下。

產生了滾動，很自然的就會想到overflow屬性，那麼就先來了解一下。

overflow屬性指定了塊容器元素的內容溢位時是否被剪裁，是overflow-x和overflow-y的簡寫。

name

overflow

可取值visible、hidden、scroll、auto、inherit

預設值visible

適用於塊級容器和建立了格式化上下文的盒子

繼承性無

通過上面的了解，想先糾正一下取值為auto的一種認識：瀏覽器會自動根據內容決定是否產生滾動。從現象上看似乎是這樣，但標準上不是這樣的，只是建議。如果使用者**不提供滾動，那就沒有，而且也不一定是滾動，這都依賴於使用者**。

再來分析一下上面有問題的情況，主要的結構和樣式如下：

html 

html,body 
body 
.pop 

設定body寬度的效果頁面，移動端訪問如下：

發現符合overflow: visible的效果，沒有產生左右滾動條。

接著有了下面的猜想：只要超出了可視區就會產生滾動。在前面的基礎上，設定浮層transform超出可視區，這是效果頁面，移動端訪問如下：

結果跟猜想的一樣，這也說明從一開始並不是body產生了滾動，而是 viewport 產生了滾動。繼續查詢資料，發現了下面的標準說明：

使用者**必須將根元素上設定的overflow屬性應用於 viewport 。當根元素是乙個 html 的 html 元素且它的overflow值是visible，並且它擁有body元素作為後代，使用者**必須將這樣的第乙個後代元素的overflow的屬性值應用於 viewport 。如果visible應用於 viewport ，則必須將其解釋為auto。從中傳播值的元素必須有乙個overflow已使用的值為visible。

在 ios 和 安卓上測試了 4、5 個瀏覽器都會出現左右滾動，但一些安卓手機上的 chrome 瀏覽器沒有出現滾動，例如在紅公尺6手機。還有一點就是：pc 端瀏覽器都不會產生左右滾動。

此外，標準上其實說的並不是很清楚，再加上標準是一回事，各家實現並不一定都是符合標準。

以上見解都是個人結合資料和實際測試得出，是否真是這樣，真不好說，不過可以當作乙個思考的方向。

web移動端浮層滾動帶動底層元素滾動問題解決

當我們寫了這樣乙個結構的時候 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假老實交代方會計師 拉開了就開始的放假...

mui table view 滾動問題

場景 手機端 頁面部分區域 這裡假設高度為500px 起初我採取的解決方案 css overflow hidden auto postion fixed z index 999我用chrome 測試 好使,但是到了真機測試環節就不好使了,後來 firefox 測試發現全域性滾動條蓋住 當前滾動條 試...

解決XHTML標準的浮動層滾動問題

解決網頁檔案中包含xhtml符合國際w3c標準的檔案頭，導致css檔案中的滾動條樣式 和部分js執行不正常的問題。這個指定是採用了新的xhtml標準，在這個標準中 document.body.scrolltop永遠返回0，在不包含以上檔案頭的網頁檔案中，浮動層還能正常顯示，當加入了以上檔案頭以後，網...