Question

我的HTML页面中有两列。

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

每个占据页面的一半

#content {
    height: 100%;
}

#left, #right {
    float: left;
    width: 50%;
    height: 100%; 
    overflow: auto;
}

我希望左右两半之间的边界可由用户调整。也就是说，用户可以在他/她浏览页面时向左或向右移动边界。有可能以某种方式这样做吗？

Answer 1

是的，但它需要JavaScript。要应用它，您当然可以设置每个边的width：

var leftPercent = 50;
function updateDivision() {
    document.getElementById('left').style.width = leftPercent + '%';
    document.getElementById('right').style.width = (100 - leftPercent) + '%';
}

现在你可以调整除法，比如leftPercent = 50; updateDivision()，但是用户不会这样做。您可以通过多种不同的方式向用户展示此信息。可能最适合的方式是在他们可以拖动的中间一点点线。为此，您可以使用一点CSS进行定位：

#content {
    position: relative;
}
#divider {
    position: absolute;
    /* left to be set by JavaScript */
    width: 1px;
    top: 0;
    bottom: 0;
    background: black;
    cursor: col-resize;
    /* feel free to customize this, of course */
}

然后确保div id divider content updateDivision并更新left以更新divider } document.getElementById('left').style.left = leftPercent + '%';：

divider.addEventListener('mousedown', function(e) {
    e.preventDefault();
    var lastX = e.pageX;
    document.documentElement.addEventListener('mousemove', moveHandler, true);
    document.documentElement.addEventListener('mouseup', upHandler, true);
    function moveHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        var deltaX = e.pageX - lastX;
        lastX = e.pageX;
        leftPercent += deltaX / parseFloat(document.defaultView.getComputedStyle(content).width) * 100;
        updateDivision();
    }
    function upHandler(e) {
        e.preventDefault();
        e.stopPropagation();
        document.documentElement.removeEventListener('mousemove', moveHandler, true);
        document.documentElement.removeEventListener('mouseup', upHandler, true);
    }
}, false);

然后你只需要一点逻辑来处理拖动。（这里，我将所有元素都放入适当命名的变量中）：

updateDivision

你应该能够阅读它以了解它是如何工作的，但简而言之：当有人按下分隔符时它会监听。当他们这样做时，它会将监听器附加到页面上以便他们移动鼠标。当它们执行时，它会更新变量并调用mouseup来更新样式。当它最终获得cursor时，它将停止在页面上收听。

作为进一步的改进，您可以在拖动时使每个元素都具有适当的{{1}}样式，这样在拖动光标时光标不会闪烁。

<强> Try it out.

Answer 2

分裂中没有任何东西可以发生任何事情。这就像写作：

<h1></h1>

更改h1的CSS并期待某些内容

可调页面划分边界

2 个答案: