Question

我有一个列表，它在页面上的分层树结构中向外扩展。我需要将页面加载到页面加载中，允许用户左右滚动。

<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});
    }

Answer 1

在导致树蔓延的事件中包含以下内容：

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

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

请注意，滚动条的左端将靠近中心页面。

将水平宽度大于窗口宽度的div居中

1 个答案: