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/

まず、2 番目の外側の垂直スクロール バーを非表示にするには、次のコードを追加します。

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 に答える