滾動條與轉換對象的實際邊界不匹配

我試圖使用transform: rotate(45deg);來旋轉html元素。這確實有效，但滾動條與旋轉元素的視覺邊界不匹配。滾動條與轉換對象的實際邊界不匹配

上下文是，我想創建一個PDF查看器應用程序，用戶也可以旋轉文件以獲得更好的可讀性。但是，他不可能滾動整個文件，因爲滾動條不夠長。

以this fiddle爲例。滾動條太短，所以你不能滾動到每個角落。

我該如何解決這個問題，以便您可以滾動整個元素？

jQuery解決方案會很好。我在Chrome v.60中對此進行了測試。

來源

2017-08-23 dv02

是點擊一個按鈕旋轉到一個角度的用戶，或者是完全定製他們多少轉動？ – cjl750

@ cjl750他可以使用'0'到'359'範圍滑塊。我設置旋轉像這樣： '$（'＃element'）.css（「transform」，「rotate（」+ $（「＃slider」）.val（）+「deg）」）;' – dv02

因此，我認爲，我們需要克服的兩個主要問題是：

圖像比容器
即使圖像並不比容器大做大，只要它的旋轉，因爲對角之間的長度要長於圖像

所以這裏的基本方法是添加一個額外的div的#wrapper和裏面的任何一個邊的長度將是更大：

使圖像大小相同#wrapper
確保新div足夠大，甚至適合圖像時，它的旋轉

關鍵是要弄清楚如何大的內包裝材料應該。這是黃金的舊款Pythagorean Theorem發揮作用。

使用一些數學，我們可以發現，對於500x300的圖像，對角上的長度是583像素，並且有些變化。所以讓我們將我們的新內部div設置爲寬度和高度爲。

<div id="wrapper" style="width: 500px; height: 300px;"> 
    <div id="content" style="width: 584px; height: 584px"></div> 
</div>

然後，讓我們確保將圖像居中放置在內部div中，以便當它旋轉時，它始終適合。

#content { 
    position: relative; 
} 
#content img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
}

從那裏，因爲的#content內的圖像是完全尺寸#wrapper一樣，我們理論上應該是好去。

不幸的是，就支持任意大小的圖像或靈活的容器而言，此解決方案並不是非常靈活。由於我們在加法，減法，乘法和除法操作中受到限制，因此我們可以使用它來表達我們內部容器的大小（至少我可以提出），因此您不需要任何calc()表達式，因此您需要自己計算這個數字並使用固定值。但它確實工作，並希望您的用例是一個PDF查看器，您的圖像將始終是相同的尺寸，所以你可以使其工作。

這裏唯一需要澄清的障礙是圖像在容器中不完全可見時不能完全顯示，這有點奇怪。爲此，我可能會嘗試使用JavaScript將滾動位置#wrapper設置爲與圖像的左上角相匹配。我會把它留給你。

演示

$('#slider').on('input', function(){ 
 
    $('#content').css("transform", "rotate(" + $("#slider").val() + "deg)"); 
 
});

#wrapper { 
 
    padding: 0; 
 
    width: 500px; 
 
    height: 300px; 
 
    overflow: auto; 
 
} 
 
#content { 
 
    width: 584px; 
 
    height: 584px; 
 
    position: relative; 
 
} 
 
#content img { 
 
    width: 500px; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="content"> 
 
    <img src="https://www.w3schools.com/css/img_lights.jpg"> 
 
    </div> 
 
</div> 
 
<input id="slider" type="range" min="0" max="360" step="1" value="0">

來源

2017-08-23 21:46:39 cjl750

Accepted the回答，因爲它完全解決了我的問題，幷包含一個示例。謝謝！ – dv02

當發生html轉換時，它獨立於其他元素工作。這意味着一個變形的元素不會移動鄰居或調整其父母。

您可以爲圖像的父級使用預定的填充。或者您可以在轉換過程中更改它，但在這種情況下，您需要關注窗口滾動位置。

爲90度旋轉的元件所需要的填充取決於你要旋轉和圖像的更大的大小等於：

(biggerDimension - lesserDimension)/2

所以，你的jQuery函數來得到父母的正確填充有異曲同工之處這個抽象的：

var $img  = $('img'), 
    imgWidth = $img.width(), 
    imgHeight = $img.height(); 

if (imgWidth > imgHeight) { 
    var parentPadding = (imgWidth - imgHeight)/2; 
} else { 
    var parentPadding = (imgHeight - imgWidth)/2; 
}

如果你的圖像是方形的，當不需要填充（90deg旋轉）。

但是，如果你想找到最大需要的填充（對於45deg，135deg等旋轉），公式會有點複雜。例如，如果最大尺寸的寬度和你想設置padding-top：

sqrt(imgWidth^2 + imgHeight^2)/2 - imgHeight/2

半對角線減去一半的高度。當高度較大和其他角落時，可以更改案例的公式。

當然，如果img是響應式的，您需要在調整大小時調用該函數。

來源

2017-08-23 21:46:31 voloshin

滾動條與轉換對象的實際邊界不匹配

回答

相關問題