显示父水平滚动条和子垂直滚动条

Question

我有一个如下所示的自定义时间线视图：http://jsfiddle.net/B4xRb/1/

内部垂直滚动只影响标题下的行。父水平滚动会影响整个时间线。

<div class="parentDiv">
    <div class="monthHeader"></div>
    <div class="lanes"></div>
</div>

然而，我如何构造这个结构，使垂直滚动条可以看到没有。

• 调整行数据，因为它可以非常宽。
• 首先向右滚动，所以当您加载页面时，两个滚动条都是可见的。

Answer 1

下面是我想出的解决方案，使用jQuery：http://jsfiddle.net/eB8WQ/6/

首先，要隐藏第二个垂直滚动条外的内容，请添加以下代码

html, body {
    overflow-y: hidden;
}

对于.lanes，您希望隐藏水平滚动条并将初始width设置为100%。

width: 100%;
overflow-x: hidden;

接下来，要使用的javascript在滚动时将.lanes的宽度设置为100% (以避免混乱的闪烁问题)，在完成滚动时，它将计算水平滚动条的位置，并将该值添加到body元素的宽度中。使用$.data函数存储值。

关于$.data：http://api.jquery.com/jQuery.data/的更多信息

$('.parentDiv').scroll(function() {
        $('.lanes').css("width", $('.monthHeader').width());
});
$('.parentDiv').scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $('.lanes').css("width", $('.parentDiv').scrollLeft() + $('body').width() + "px");
    }, 100));
});

一些来自this previous answer的代码。