1

我有一个这样的自定义时间线视图：http: //jsfiddle.net/B4xRb/1/

内部垂直滚动仅影响标题下方的行。父水平滚动影响整个时间轴。

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

但是，我如何构造它以便可以看到垂直滚动条

  • 调整行数据，因为它可能非常宽。
  • 最初向右滚动，我想要它，以便在加载页面时，两个滚动条都可见
4

1 回答 1

2

这是我想出的解决方案，使用 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));
});

一些代码取自这个先前的答案。

于 2013-02-28T23:07:27.880 回答