CSS：固定div的垂直位置，但可以水平移动

Question

CSS：固定div的垂直位置，但可以水平移动

3

你好，我想做的事情是：有一个可滚动的div，大小固定，比如400x400像素。里面有两个div：标题div和数据div。它们的高度和宽度都是可变的。我想要的是能够同时水平滚动标题和数据div，但只能垂直滚动数据。换句话说，我希望标题div在垂直方向上固定，但可以在水平方向上滚动，数据网格则完全可滚动。以下是设置：

<div style="height: 400px; width: 400px; overflow: scroll; position: static;" >
<div style="z-index: 7500; position: fixed; height: 100px; width: 800px">
    //header
</div>
<div style="poxition: relative; top: 100px; width: 800px; height: 2000px">
    //data
</div>
</div>

我试过类似这样的方法：

<div style="height: 400px; width: 400px; overflow: scroll; overflow-y: hidden; position: static;" >
<div style="z-index: 7500; height: 100px; width: 800px; position: relative">
    //header

<div style="height: 400px; width:auto; overflow: scroll; overflow-x: hidden; position: static;" >
    <div style="position: relative; top: 100px; width: 800px; height: 2000px">
        //data
    </div>
</div>

除了垂直滚动条随着我的数据div水平滚动之外，它的功能很好，我需要它始终显示。

我真的不想使用框架，那么是否可以使用div来实现呢？也许有一些属性，比如style="position-y: fixed; position-x: relative"？

谢谢

- exp

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gaurav Saxena · Accepted Answer

我的解决方案与你的HTML略有不同，但满足了你的需求。

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function syncScrolls()
    {
        document.getElementById('header').scrollLeft = document.getElementById('data').scrollLeft
    }
  </SCRIPT>
 </HEAD>

 <BODY>
 <div style="height: 100px; width: 400px; overflow: scroll; overflow:hidden" id="header">
     <div style="z-index: 7500; height: 100px; width: 800px; border: solid 1px green;">
            header
    </div>
</div>
  <div style="height: 400px; width: 400px; overflow: scroll; position: static;" onscroll="syncScrolls()" id="data">
    <div style="poxition: relative; top: 100px; width: 800px; height: 2000px; border: solid 1px green"">
        data
    </div>
</div>
 </BODY>
</HTML>