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。

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

1 个答案: