Question

我有两个div（左 - 右）用于拖放（HMTL5）。 left-div包含可用的成员，这是一个非常长的列表。右侧div包含所选成员。

这里的问题是，正确的div只与其中的项目数一样高。所以他们问我是否可以在向下滚动时使正确的div向下滑动，这样他们就可以轻松地将成员从左向右拖放，反之亦然。

当然滑动必须限于父div。

#container {
    border: 1px solid black;
    padding: 20px;
}
#left {
    width: 200px;
    height: 1000px;
    background-color: blue;
    float: left;
    margin-right: 20px;
}
#right {
    width: 200px;
    background-color: red;
    float: left;
}

这是我的jsfiddle：http://jsfiddle.net/bflydesign/odu29g1o/

Answer 1

#right {
  width: 200px;
  background-color: red;
  float: left;
  position:fixed;
}

当你滚动时，position fixed属性会将div保持在原位，因此它会随着屏幕滚动

Answer 2

您需要为正确的div设置position: fixed;

以下是更新的CSS：

#container {
    border: 1px solid black;
    padding: 20px;
    width: 450px;
}
#right {
    position: fixed;
    left: 250px;
    width: 200px;
    background-color: red;
    float: left;
}

更新了小提琴。这是链接：http://jsfiddle.net/odu29g1o/2/

Answer 3

这是您需要的确切内容。试试这个。

当然你必须使用

position: fixed

http://jsfiddle.net/Yunus_Aslam/rbx4ak1k/

Answer 4

以下是一个解决方案：

#container {
    border: 1px solid black;
    padding: 20px;
    display: block;/*Change to block*/
    position: relative;/*Add position relative*/
    width: 500px;    
}
#left {
    width: 200px;
    height: 1000px;
    background-color: blue;
    float: left;
    margin-right: 20px;
}
#right {
    width: 200px;
    background-color: red;
    position: fixed;/*Add position fixed*/
    left: 300px;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

fiddle

滚动时让右div在父div中滑动

4 个答案: