2016-12-04 35 views
0

我正在使用CSS轉換來擴展整個頁面的項目。擴大了一點之後,來自角落的內容開始變得不可見,因爲它們在可見範圍之外。有沒有辦法通過使用變換縮放垂直滾動或水平滾動來使內容仍然可見?我目前使用Javascript功能來擴大身體像這樣HTML正文CSS變換放大導致內容被刪除

document.body.style.transform = 'scale(1.5)'; 

然而

,這切斷了從網頁的某些內容。我需要它繼續工作,因爲我從1.0開始繼續擴展。

+0

你能否簡要介紹一下爲什麼你甚至需要放大整個身體? –

回答

0

嘗試調節變換產地:

document.body.style.transformOrigin = 'top left'; 
document.body.style.transform = 'scale(' + scaleFactor + ')'; 

您可能還需要調整機體的寬度和高度相匹配的縮放。

var scaleFactor = 1.5; 
document.body.style.transformOrigin = 'top left'; 
document.body.style.transform = 'scale(' + scaleFactor + ')'; 
document.body.style.width = 100 * scaleFactor + "%"; 
document.body.style.height = 100 * scaleFactor + "%"; 

有關變換的說明。變換是虛構的,不會改變物理尺寸,包括x,y,寬度和高度。所以你必須手動管理這些物理尺寸,以匹配你的「變換」尺寸,以保持滾動條的快樂。

+0

感謝您的transformOrigin建議。這使它更好。不幸的是,寬度和高度的變化扭曲了頁面 – Coder