如何解決桌面瀏覽器觸發滾動條背景內容晃動問題在具有不同頁面內容高度的頁面之間切換？

這個問題發生在我兩次，如何解決桌面瀏覽器觸發滾動條背景內容晃動問題在具有不同頁面內容高度的頁面之間切換？

當使用引導3模式對話框

，當模式對話框彈出，瀏覽器滾動條出現在Chrome桌面，它會導致背景內容振搖約0.5秒，再次成爲靜態的。然而，在移動設備中，由於移動瀏覽器不顯示滾動條，比如windows chrome，所以在這些瀏覽器中查看的人不會看到這個問題。

有效破解我找到了引導模式問題是應用CSS覆蓋象下面這樣：

.modal-open { 
overflow: hidden; 
width: calc(100% - 17px);/* for chrome/safari*/ 
width: -moz-calc(100% - 16px); /*for firefox*/ 
/*width: -ms-calc(100% - XXpx) */ 
}

現在的jQuery移動框架我也有，當我點擊的轉換，從頁面到這個驚天問題頁面，頁面轉換後背景圖像會抖動，因此如果您在Windows桌面瀏覽器中查看它，它看起來相當麻煩。

我不知道是否有人修復了jQuery的移動背景抖動問題，當桌面瀏覽器出現抖動問題時，jquery-mobile頁面之間的數據轉換髮生在不同頁面高度之間。

塞納里奧例如：

頁答：頁面內容爲長，所以有滾動條時，網頁完全加載。

B頁面：即使完全加載頁面內容也很短，將不會生成滾動條。頁面C：與頁面A相同（內容高度有滾動條）; D：與頁面B相同（沒有滾動條）; D：與頁面B相同（不滾動條）; D：與頁面B相同（不滾動條）; D：與頁面B相同（不滾動條）;

觸發器： 使用juqerymobile框架連結觸發數據過渡= 「***」這些頁面之間：

頁A - >網頁B或第C - >頁d，搖動出現問題。

B頁面 - >頁面d，晃動的問題出現，因爲大多數轉型尚在進行中產生滾動條，所以你會看到在沒有滾動頁面過渡之間三個狀態：
1.no，滾動條2.scrollbar可見或滑動3.no-scrollbar

頁面A→頁面C，在動畫過渡期間一直沒有搖動的滾動條。

來源

2015-05-07 BOBO

其實這個問題可以很容易地轉載在jquery移動過渡演示頁面：http：//demos.jquerymobile.com/1.1.1/docs/pages/page-transitions.html關閉對話轉換後你會看到在頁面轉換完成後，背景中的內容在延遲中搖動。（第一次看到沒有滾動條的頁面主體，然後當過渡完成時，滾動條出現，你會在後臺看到輕微的晃動效果） – BOBO

下面是我最近發現和測試的解決方案，用於消除由桌面瀏覽器導致的抖動效果'&滾動條隱藏效果。
該解決方案看起來非常簡單，適合我的項目。

示例修復代碼

/* for chrome hidding scrollbar */ 
::-webkit-scrollbar { 
    width: 0px!important; 
}

來源

2015-05-20 11:25:39 BOBO

我也有這樣的經歷的震動效果時，滾動條會突然出現一個網頁。我的解決方案有點不同。我的容器寬度爲736px，因此在body元素的CSS中，我給它一個更大的1200px寬度，並指出overflow-x：hidden。這似乎工作，除非它不完美。所以我也指出了1200px的高度，並且隱藏了整體溢出。現在頁面不受任何晃動的影響。

下面是與live code鏈接，關鍵的一部分是作爲造型如下：

body { 
    width:1200px; 
    height:1200px; 
    overflow:hidden; 
} 

#container { 
    margin:auto;width:736px; 
}

如果您註釋掉body元素的CSS，你會再次當看到網頁抖動滾動條出現。

來源

2017-01-16 09:23:48 slevy1

如何解決桌面瀏覽器觸發滾動條背景內容晃動問題在具有不同頁面內容高度的頁面之間切換？

回答

相關問題