居中橫向寬度大於窗口寬度的div

我有一個列表，它以頁面上的分層樹結構向外擴展。我需要在頁面加載中心列表，允許用戶左右滾動。居中橫向寬度大於窗口寬度的div

<body> 
    <div class="container"> 
    <div class="tree"> 
     <ul> 
     <li> 
      <ul> 
      <li> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </div> 
    </div> 
</body>

所以我們假設窗口大小或內部寬度是1000px。假設.tree是2000px。我需要加載頁面，使得.tree的左邊是-500px，水平滾動條居中，因此用戶可以左右移動以查看所有2000px的.tree。

我不成功的嘗試

$innerWidth = $('body').innerWidth(); 
    $treeWidth = $(".tree ul:first").width(); 
    $(".tree").css("width", $treeWidth); 
    if ($treeWidth > $innerWidth) { 
     $treeDiff = ($treeWidth - $innerWidth)/2; 
     $(".container").css({"min-width" : $treeWidth, "margin-left" : -$treeDiff, "width" : $treeWidth}); 
    } else { 
     $(".container").css({"min-width" : $treeWidth, "width" : $innerWidth}); 
    }

來源

2017-01-24 user300979

包裹在以下，導致樹的事件傳播：

var newWidthDec = parseFloat($('.tree').css('width').replace('px','')); 
var newWidth = Math.ceil(newWidthFloat); 

window.scrollTo((newWidth/2),0);

注意滾動條的左端，將接近中心 - 頁。

來源

2017-01-24 02:41:08

居中橫向寬度大於窗口寬度的div

回答

相關問題