Question

我想在html和css中创建可分解的div。

我的目标如下：我有三个div：

enter image description here

橙色div应该保持在左上角。

向左或向右滚动（水平轴）时，我希望黄色窗格以及蓝色窗格向左或向右移动。绿色和橙色窗格不应向左或向右移动。

向上或向下滚动（垂直轴）时，我希望绿色和蓝色窗格向上或向下移动。黄色和橙色窗格不应向上或向下移动。

所有四个div都位于另一个div中。

<div class="panes">
    <div class="orange"></div>
    <div class="yellow"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

有溢出css命令，但我可以弄清楚如何实现这一点。

Answer 1

根据您的要求使用 OverFlow 。

示例：http://jsfiddle.net/kevalbhatt18/vme2ejL1/2/

我创建了 4 div并在其上应用 css 。

在 css 中，我使用 overflow-x：scroll，overflow：scroll;溢出-Y：滚动;

所以代替滚动，你可以使用 auto ，即 overflow-x：auto，overflow：auto; overflow-y：auto;

因此，当您使用自动而不是滚动时，滚动条不可见单元ll您的文字在您的div旁边

<强> HTML



<div class="panes">
    <div class="orange"></div>
    <div class="yellow"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

<强> CSS ：

的

的
.orange { width: 30%; height: 93px; background-color: orange; float: left; } .yellow { float: left; width: 70%; height: 93px; background-color: yellow; overflow-x: scroll; } .green { float: left; width: 30%; height: 400px; background-color: green; overflow-y: scroll; } .blue { float: left; width: 70%; height: 400px; background-color: blue; overflow: scroll; }

的

Answer 2

我认为你只能管理1个场景。或者用两个div滚动垂直或滚动horizontall两个div。

我的例子只关注水平滚动： JSFiddle：https://jsfiddle.net/0tv5t3zo/

<div class="panes">
    <div class="orange"></div>
    <div class="green"></div>
</div>
<div class="right">
    <div class="yellow">
        <p>lorem ipsum dolar whatever lorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whateverlorem ipsum dolar whatever</p>
    </div>
    <div class="blue"></div>
</div>

CSS：

.panes{
    float:left;
}
p{
    margin:0; 
    padding:0; 
    width:650px; 
    display:inline-block;
}
.orange{
    background-color:#FF7F27; 
    width:150px; 
    height:100px;
    float:left;
}
.yellow{
    background-color:yellow; 
    width:600px; 
    height:100px;
    float:left;
}
.green{
    background-color:green; 
    width:150px; 
    height:400px;
    float:left;
    clear:both;
}
.blue{
    background-color:blue;
    width:600px; 
    height:400px;
    float:left;
}
.right{
    overflow-x: scroll;
    width:600px; 
}

据我所知，不可能同时使绿色和蓝色div可滚动。

Answer 3

我现在已经通过使用jquery找到了解决方案：

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
    #content {
        position: fixed;
        height: 417px;
        width: 1000px;
        top: 5px;
        left: 105px;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    #header {
        height: 50px;
        width: 3000px;
        background-color: yellow;
    }

    #appointments-container {
        height: 350px;
        width: 3000px;
        background-color: yellow;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    #appointments {
        height: 700px;
        width: 3000px;
        background-color: lightblue;
    }

    #legend {
        position: fixed;
        top: 55px;
        left: 5px;
        height: 350px;
        width: 100px;
        background-color: lime;
        overflow-y: hidden;
    }

    #topleft {
        position: fixed;
        top: 5px;
        left: 5px;
        height: 50px;
        width: 100px;
        background-color: orange;
    }

    #scroller {
        position: fixed;
        top: 55px;
        left: 1105px;
        height: 350px;
        width: 18px;
        overflow-y: scroll;
    }

    #scroller-content{
        height: 700px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
    <div >
    <div id="topleft"></div>
    <div id="legend">
    <div id="legend-content">
        1 <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />
        11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
        21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />
        32<br />33<br />34<br />35<br />36<br />37<br />38
    </div>
</div>
<div>
<div id="content">
    <div id="header">
        1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 
         - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 -
    </div>
    <div id="appointments-container">
      <div id="appointments">
         1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 
         - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 - 1 - 1- 1 - 1 - 1 -  
        <br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br />
        11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br />20<br />
        21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br />29<br />30<br />
        32<br />33<br />34<br />35<br />36<br />37<br />38
      </div>
    </div>
</div>
<div id="scroller">
    <div id="scroller-content">
    </div>
</div>

<script>
    $(document).ready(function(){
        $("#scroller").scroll(function() {
            var height  = $("#scroller").scrollTop();

            $("#appointments-container").scrollTop(height);
            $("#legend").scrollTop(height);
        });
    });
</script>

在滚动窗格时使用滚动事件进行捕获。它使用scrollTop（height）以编程方式滚动其他窗格。

CSS定位：滚动时固定左或顶部

3 个答案: