HTML和CSS3 * JavaScript的先進的滾動

我需要創建HTML，CSS3和JavaScript的工具。它將包含一些水平和垂直滾動條，以便正確查看所有內容，並保留一些元素的固定大小。這是試圖解釋什麼，我想 enter image description here HTML和CSS3 * JavaScript的先進的滾動

佈局所以，我有一個#main含有#left和#right DIV DIV。左DIV包含兩個DIV，右DIV包含另外兩個DIV。現在，我想創建一個垂直滾動條（vscroll1）上下滾動＃內容和#menu DIVs（同時，就像他們在哪裏相同的DIV）。另一方面，我想要一個水平滾動條（hscroll2）滾動到左側和右側通過＃內容和#left_top_div，在同一時間，就像它會是相同的內容。

我想我可能有2種方式：一些CSS + HTML竅門或使用JavaScript。眼下，如果附加滾動條#leftdiv（overflow:auto），它會滾動（由它包含的DIV），因爲我想要的#left_top_div和＃內容，但它垂直滾動將僅＃內容 ，而不是#menu DIV。所以，這是一個問題。我可以使用JavaScript與.onscroll()事件來更改#menu topMargin，但有一個小的延遲，看起來不太好。你建議我做什麼？我只需要一些提示或技巧（當然，也可以欣賞一些示例代碼）。感謝大家，至少，閱讀我所有的問題。

來源

2012-09-04 ali

看起來像框架集工作 - ！ \ *被謀殺* –

將所有div的CSS溢出默認爲「隱藏」。然後......

裹#menu和＃內容在一個overflow-y: scroll;

一個固定高度的div然後讓#menu和＃內容固定寬度的div的overflow-x: scroll

來源

2012-09-04 17:16:15

你的回答給了我更多的啓發。但是，如果我按照你說的做了什麼，那麼#left_top_div不會與#content水平滾動。 – ali

@ali這是真的。我錯過了這個要求。這有點棘手。你可能不得不求助於JavaScript，並觀察一個div的滾動，然後同步其他人。 –

謝謝。我嘗試過，但是位置變化的一個小延遲使它看起來像一個繪圖問題。我需要一些JavaScript技巧才能讓它更快。我使用marginLeft將#left_top_div移動到與#content相同的位置，但#content的滾動速度更快。 – ali

HTML和CSS3 * JavaScript的先進的滾動

回答

相關問題