顯示父水平滾動條和子垂直滾動條

我有一個這樣的自定義時間線視圖：http://jsfiddle.net/B4xRb/1/顯示父水平滾動條和子垂直滾動條

內垂直滾動僅影響標題下的行。父級水平滾動會影響整個時間軸。

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

但是，我怎麼能結構這一點，以便垂直滾動條可以看出，恕不

調整的行數據，因爲它可真寬。
最初向右滾動，我想它使加載頁面，無論滾動條都可見

來源

2013-02-28 Michael

似乎按照您在所有瀏覽器上爲我描述的方式工作......垂直滾動條位於頁面的右側，無論頁面寬度和數據大小如何。那麼，如果行數據的寬度太小，滾動條向內移動到左邊......你可以通過在'.lanes'上應用'width：100％'來解決這個問題。 – Joey 2013-02-28 20:57:13

然後，導致其他滾動條出現，試試看...... – Michael 2013-02-28 21:01:45

你是對的，我沒有注意到，在小尺寸它確實會導致另一個水平滾動條。將'overflow-x：hidden;'也添加到'.lanes'中。這是我正在工作的小提琴：http：//jsfiddle.net/eB8WQ/ – Joey 2013-02-28 21:10:16

這是我想出了一個解決方案，使用jQuery：http://jsfiddle.net/eB8WQ/6/

首先，要隱藏第二外側垂直滾動條，添加以下代碼

html, body { 
    overflow-y: hidden; 
}

爲.lanes，你要隱藏的水平滾動條，並設置初始width至100％。

width: 100%; 
overflow-x: hidden;

接下來，您要使用套.lanes寬度爲100％，而滾動（避免凌亂的閃爍問題）的JavaScript，就大功告成了滾動時，它計算水平滾動條位置並將該值添加到您的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採取了一些代碼。

來源

2013-02-28 23:07:27 Joey

顯示父水平滾動條和子垂直滾動條

回答

相關問題