Question

我有三个div与css叠在一起。中间的一个应该是一个可拖动的分隔符，这样顶部的div及其内容在上面而另一个div在下面。每个都有自己的滚动条。见jsfiddle

但是如果找到我的js代码不是很好，因为它分别设置了三个div的高度：

html：

<div id="wrapper">
    <div id="content">
    <div id="dragger"></div>
    <div id="footer"></div>
</div>

css代码

 #wrapper {
     height: 100%;
     width: 100%;
     overflow: auto;
     position: relative;
 }
 #content {
     position: fixed;
     bottom: 25%;
     width:100%;
     height: 75%;
     overflow:scroll;
     overflow-x:hidden;
 }
 #dragger {
     position: fixed;
     bottom: 25%;
     width:100%;
     cursor: ns-resize;
     height: 5px;
 }
 #footer {
     position: fixed;
     bottom: 0;

     width:100%;
     height: 25%;
     overflow:scroll;
     overflow-x:hidden;
 }

js代码：

   ...
   $('#footer').css({
        "height": bodySize - e.pageY
    });
    $('#content').css({
        "bottom": bodySize - e.pageY,
            "height": e.pageY
    });
    $('#dragger').css({
        "bottom": bodySize - e.pageY
    });
    ...

有没有更好的方法来实现相同的行为，我想到了一些方法来根据css中拖动器的位置来制作页脚和内容div高度。但是我不知道怎么做。任何人都可以帮助我吗？

Answer 1

http://jsfiddle.net/d4j3V/4/

您正在拨打同一个电话三次。而不是这样做，只需在开头计算：

var height = bodySize - e.pageY;

然后在您进行计算的每个地方删除该变量：

$('#footer').css({
    "height": height
});
$('#content').css({
    "bottom": height,
     height": e.pageY
});
$('#dragger').css({
    "bottom": height
});

此外，不是在三个不同时间调用$(document.body)，而是将各种on来电链接在一起。

$(document.body).on("mousemove", function (e) {
    ....
}).on("mousedown", "#dragger", function (e) {
    ....
}).on("mouseup", function (e) {
    ....
});

如何简化此JavaScript代码

1 个答案: