javascript - 从水平滚动中卡住一个div,但让它垂直滚动

标签 javascript html css svg

我有一个外部分区(具有固定的高度和宽度),其中包含两个垂直放置的分区,占用相等的宽度和全高。我希望它们在垂直方向上同时滚动,但只有第二个水平滚动。所以基本上第一个 div 被单独水平滚动卡住。 在 div 中,我使用基于 SVG 的图形的 d3 进行数据可视化。

最佳答案

fiddle

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

关于javascript - 从水平滚动中卡住一个div,但让它垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17036906/

相关文章:

javascript - 停止 iPhone 加载压缩图像

javascript - 如何从外部 JavaScript 文件访问 HTML 文档中的变量

iphone - 移动 safari 中忽略的溢出 x 值

html - 设置 section 和 aside 以使用 main 标签自动展开

css - css中div的对齐方式

javascript - Props 在我的 Vue.js 应用程序中不起作用

javascript - 如何确保用户在任何时候都无法打开多个弹出窗口?

html - 为什么我必须定义 "transform: xxx( px px)"毕竟 "-o-/-webkit-/-moz-transform: xxx(px px)"?

javascript - 容器内的两个 div 重叠

javascript - Node.js:http.Server、http.Agent、sockets、http.request的关系