冻结水平滚动的div，但让它垂直滚动 [英] Freezing a div from horizontal scrolling but letting it scroll vertically
本文介绍了冻结水平滚动的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，但让它垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
