冻结水平滚动的div，但让它垂直滚动

问题描述：

我有一个外部分区（具有固定的高度和宽度），其中包含两个垂直放置的分区，占据相同的宽度和全高。我希望它们在垂直方向上同时滚动，但只有第二个方向水平滚动。因此，基本上第一个div从水平滚动单独冻结。
我使用d3进行数据可视化，使用基于SVG的图形。

I have an outer division(with fixed height and width) which contains two divisions placed vertically occupying equal widths and full height. I want them to scroll simultaneously in vertical direction but only the second one to scroll horizontally. So that essentially the first div is frozen from horizontal scrolling alone. within the divs I am using d3 for data visualization using SVG based graphics.

答

小提琴

    <style>
div.Container{
   height: 250px;
   border: 2px solid #F00; 
   width: 600px;
    padding: 3px;
    overflow: auto;

    /* POSITION */
    position:fixed;
}

div.Const{
   border: 2px solid #0F0;
   width: 200px; 
    height: 400px;
    float:left;
    position:absolute;
}
div.Main{
  border: 2px solid #00F;
  width: 800px;
  height: 200px;
  margin-left: 220px;
  top:0px;
  float:left;
}
    </style>
<body>
<div id="Container" class="Container">
    <div id="Const" class="Const"> 
    </div>
    <div id="Main" class="Main">
    </div> 
</div>
    </body>
    <script>
$('#Container').scroll(function() {
    $('#Const').css('left', $('#Container').scrollLeft());
});
</script>

冻结水平滚动的div，但让它垂直滚动

相关推荐