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

我想在html和css中创建可缩放的div

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

我的目标如下：
我有三个分区：


橙色的div应该保持在左上方

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

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

所有四个分区都位于另一个分区中

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



有溢出css命令，但我可以想出如何实现这一点。
根据您的要求使用溢出

示例：

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

在css中，我使用了overflow-x:scroll，overflow:scroll；溢出-y：
卷轴

因此，您可以使用自动代替滚动，即溢出-x:auto，溢出：auto；溢出y：自动

因此，当您使用auto而不是滚动时，滚动条将不可见。所有文本都会在div旁边显示

HTML



我认为您只能管理一种场景。或使用两个div垂直滚动或水平滚动两个div

我的示例只关注水平滚动：
JSFiddle：

据我所知，使绿色和蓝色div同时可滚动是不可能的。
我现在通过使用jquery找到了一个解决方案：


试验
#内容{
位置：固定；
高度：417px；
宽度：1000px；
顶部：5px；
左：105px；
溢出-x：滚动；
溢出y：隐藏；
}
#标题{
高度：50px；
宽度：3000px；
背景颜色：黄色；
}
#预约容器{
高度：350px；
宽度：3000px；
背景颜色：黄色；
溢出y：隐藏；
溢出x：隐藏；
}
#任命{
高度：700px；
宽度：3000px；
背景颜色：浅蓝色；
}
#传奇{
位置：固定；
顶部：55px；
左：5px；
高度：350px；
宽度：100px；
背景色：石灰；
溢出y：隐藏；
}
#左上角{
位置：固定；
顶部：5px；
左：5px；
高度：50px；
宽度：100px；
背景颜色：橙色；
}
#卷轴{
位置：固定；
顶部：55px；
左：1105px；
高度：350px；
宽度：18px；
溢出y：滚动；
}
#滚动条内容{
高度：700px；
}
1
2
3
4
5
6
7
8
9
10
11

11
12
13
14
15
16
17
18
19
20

21
22
23
24
25
26
27
28
29
30

32
33
34
35
36
37
38
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 -
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 -  

2
3
4
5
6
7
8
9
10
11

11
12
13
14
15
16
17
18
19
20

21
22
23
24
25
26
27
28
29
30

32
33
34
35
36
37
38
$（文档）.ready（函数（）{
$（“#滚动条”）.scroll（函数（）{
变量高度=$（“#滚动条”）.scrollTop（）；
$（“#约会容器”）.scrollTop（高度）；
$（“#图例”）.scrollTop（高度）；
});
});



它使用scroll事件在滚动窗格时进行捕获。它使用scrollTop（高度）以编程方式滚动其他窗格。
您已经提出了一个请求，，，现在您做了什么来尝试自己解决这个问题？您可以分享您的尝试吗？尝试一下我理解您的要求，尽管您需要改进您的问题。仅仅使用HTML和CSS是无法做到这一点的。你也需要JavaScript。检查互联网上的一些栏目冻结技术。栏目的宽度是多少？如果它的响应速度为100%屏幕宽度，您如何滚动蓝色和黄色？
.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;
}

<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>

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

<!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>