居中父 div 滾動條，具有動態寬度

Question

我有一個父div和一個子canvas，我想將父div的滾動條居中，因為我無法在我的項目中為canvas添加任何樣式。

 #parent{ width:80vw; height:200px; border:1px blue solid; overflow-x:scroll; } #parent #child{ width:70vw; border:1px solid black; margin-left:50px; margin-right:50px; }

 <div id="parent"> <canvas id="child"> </canvas> </div>

在此代碼段中，canvas 上的邊距用於演示，因為 canvas 具有不同的寬度和高度並且居中。
我只想滾動內部 canvas 成為中心的父 div。 我這樣做了但沒有正確的結果

 $(document).ready(function(){ var parent = $("#parent"); var child = $("#child"); var final = (child.width() - parent.width()) / 2; parent.scrollLeft(final); console.log(final) });

 #parent{ width:90vw; height:200px; border:1px blue solid; overflow-x:scroll; } #parent #child{ width:80vw; border:1px solid black; margin-left:50px; margin-right:50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent"> <canvas id="child"> </canvas> </div>

參考上面代碼： How to position horizontal scroll bar at center of DIV
如果您想檢查實時域，我在做什么： https://mypagemaker.s3.amazonaws.com/index.html

Answer 1

您需要將父級 div 包裹在更高的父級 div 中。

 $(document).ready(function(){ var parent = $('#parent'); var parent_sub = $('#parent > #parent_sub'); var final = (parent_sub.width() - parent.width())/2; parent.scrollLeft(final); console.log(final); });

 #parent { width:90vw; overflow-x:scroll; height:200px; border:1px blue solid; } #parent_sub { display: table; } #parent #child{ width:80vw; border:1px solid black; margin-left:50px; margin-right:50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent"> <div id="parent_sub"> <canvas id="child"> </canvas> </div> </div>