2016-12-04 6 views
0

私はCSSトランスフォームを使用してページ全体を拡大するプロジェクトに取り組んでいます。ビットを拡大した後、コーナーからのコンテンツは、可視の範囲外にあるため、見えなくなり始めます。変換スケーリングを使用して縦方向または横方向にスクロールしてもコンテンツを表示する方法はありますか?HTML本文CSS変換はコンテンツの削除を引き起こします。

私は現在、とても

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

しかし、これはページから一部のコンテンツを遮断するように体をスケールアップするためにJavascriptを使用しています。私は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、幅、高さなどの物理的な寸法は変更しません。したがって、スクロールバーを幸せにするためには、これらの物理的な寸法を手動で "transform'd"の寸法に合わせて管理する必要があります。

+0

transformOriginアドバイスをありがとう。これはそれをより良くする。残念なことに、幅と高さが変化するとページが歪んでしまいます – Coder

関連する問題