我有一张图表 - 使用PHP / MySQL计算联合预期寿命...真的很大。
页面加载时，两个年龄范围的x和y轴位于容器div中。我需要能够滚动容器div（垂直和水平）并使左侧和顶部容器（x和y轴）粘附到图表中的相应值，但也保留在容器内。
<div id="container">
<div id="top_container">X-axis: age range for person one</div>
<div id="left_container">Y-axis: age range for person two</div>
Content Here - overflow:hidden;
(a huge PHP/MySQL driven chart)
</div>
以下是布局的基本概念：
-------------------------------------------------------------------------------
| X axis - attached to content, but fixed inside main container |
-----------------------------------------------------------------------------
| Y | main content (scroll up and down in container) |
| a | |
| x | |
| i | |
| s | |
-------------------------------------------------------------------------------
希望这有意义...... x和y（顶部和左侧）列需要固定到主要内容区域（因此保持准确）并且需要粘贴到容器区域的顶部和左侧。
提前致谢！
编辑：我认为这比我想象的要简单但是如果有人有类似的问题让我知道，我会帮忙。这是基本的想法：
$('#container_main').scroll(function(){
$('#top_container').css({
'top': $(this).scrollTop()
});
$('.row_header').css({
'left': $(this).scrollLeft() -51 //needed tweaking for position
});
});
定位于＆＃39;固定＆＃39;元素必须是绝对的。
干杯
答案 0 :(得分：1)
在页面顶部创建一个固定位置的x轴容器div。在该固定div中，使用轴的内容创建一个可水平滚动的div。
在页面左侧创建一个固定位置的y轴容器div。在该固定div中，使用轴的内容创建一个可垂直滚动的div。
创建具有固定位置的内容容器div。在该固定div中，创建一个水平和垂直可滚动的div。
然后，每当滚动内容时，使用javascript（我使用jQuery但不需要）来滚动轴。
这很有趣，我觉得它看起来很棒！ http://codepen.io/pabo/pen/KsrzJ
HTML：
<div id="x-axis">
<div class="scrollablecontent">
x-axis
<p>
<span class='tick'>1</span>
<span class='tick'>2</span>
<span class='tick'>3</span>
<span class='tick'>4</span>
<span class='tick'>5</span>
<span class='tick'>6</span>
<span class='tick'>7</span>
<span class='tick'>8</span>
<span class='tick'>9</span>
<span class='tick'>10</span>
<span class='tick'>11</span>
<span class='tick'>12</span>
<span class='tick'>13</span>
<span class='tick'>14</span>
<span class='tick'>15</span>
<span class='tick'>16</span>
<span class='tick'>17</span>
<span class='tick'>18</span>
<span class='tick'>19</span>
<span class='tick'>20</span>
</div>
</div>
<div id="y-axis">
<div class="scrollablecontent">
y-axis
<span class='tick'>1</span>
<span class='tick'>2</span>
<span class='tick'>3</span>
<span class='tick'>4</span>
<span class='tick'>5</span>
<span class='tick'>6</span>
<span class='tick'>7</span>
<span class='tick'>8</span>
<span class='tick'>9</span>
<span class='tick'>10</span>
<span class='tick'>11</span>
<span class='tick'>12</span>
<span class='tick'>13</span>
<span class='tick'>14</span>
<span class='tick'>15</span>
<span class='tick'>16</span>
<span class='tick'>17</span>
<span class='tick'>18</span>
<span class='tick'>19</span>
<span class='tick'>20</span>
</div>
</div>
<div id="content">
<div class="scrollablecontent"><p>Bacon ipsum dolor sit amet beef salami pork loin ham sausage. Meatball tail short loin tenderloin doner. Porchetta filet mignon hamburger, drumstick kielbasa brisket pork pancetta. Pig sirloin doner leberkas chicken, salami ham beef ribs. Pastrami rump sausage tongue cow bresaola porchetta jowl chuck kevin beef sirloin kielbasa fatback. Bacon ball tip boudin meatball drumstick, cow flank rump beef ribs pancetta. Fatback pancetta rump shank meatloaf tri-tip.
<p>Hamburger short ribs tri-tip salami capicola. Salami jowl ribeye, strip steak spare ribs prosciutto biltong pancetta pig ball tip brisket landjaeger venison sirloin. Ham hock swine beef ribs boudin tail shoulder. Biltong kielbasa venison chuck jowl strip steak. Capicola chicken chuck, rump short ribs meatball spare ribs prosciutto. Jowl pork pork belly hamburger corned beef ground round bacon brisket kevin sirloin. Hamburger frankfurter pork belly pork filet mignon chicken fatback short ribs, rump tenderloin salami kielbasa brisket andouille bacon.
<p>Cow turkey landjaeger biltong leberkas bresaola filet mignon shoulder hamburger. Doner sirloin boudin beef ribs shankle ham bresaola pork chop beef pork belly rump short ribs jowl leberkas. Chicken swine biltong ham hock kielbasa sirloin ball tip hamburger meatloaf pork chop turkey pork belly tongue. Brisket bresaola sausage meatloaf ground round ball tip, drumstick pancetta capicola.
<p>Kielbasa leberkas sausage turducken landjaeger shoulder. Beef shoulder biltong prosciutto ball tip, leberkas strip steak. Ham hock salami ball tip, jowl porchetta ground round frankfurter jerky doner tenderloin short loin. Cow shankle turkey, filet mignon chuck rump kielbasa turducken. Beef jerky landjaeger leberkas pork loin pastrami tongue.
<p>Pastrami hamburger sausage ham boudin, beef jowl kevin porchetta shank meatball landjaeger ground round pork chop kielbasa. Pig cow ground round kielbasa short loin andouille, swine shankle turducken salami venison tenderloin kevin bacon shank. Shank corned beef capicola beef jerky, landjaeger spare ribs. Ham hock biltong frankfurter pig hamburger pork tri-tip boudin pork belly bacon.
<p>Bacon ipsum dolor sit amet beef salami pork loin ham sausage. Meatball tail short loin tenderloin doner. Porchetta filet mignon hamburger, drumstick kielbasa brisket pork pancetta. Pig sirloin doner leberkas chicken, salami ham beef ribs. Pastrami rump sausage tongue cow bresaola porchetta jowl chuck kevin beef sirloin kielbasa fatback. Bacon ball tip boudin meatball drumstick, cow flank rump beef ribs pancetta. Fatback pancetta rump shank meatloaf tri-tip.
<p>Hamburger short ribs tri-tip salami capicola. Salami jowl ribeye, strip steak spare ribs prosciutto biltong pancetta pig ball tip brisket landjaeger venison sirloin. Ham hock swine beef ribs boudin tail shoulder. Biltong kielbasa venison chuck jowl strip steak. Capicola chicken chuck, rump short ribs meatball spare ribs prosciutto. Jowl pork pork belly hamburger corned beef ground round bacon brisket kevin sirloin. Hamburger frankfurter pork belly pork filet mignon chicken fatback short ribs, rump tenderloin salami kielbasa brisket andouille bacon.
<p>Cow turkey landjaeger biltong leberkas bresaola filet mignon shoulder hamburger. Doner sirloin boudin beef ribs shankle ham bresaola pork chop beef pork belly rump short ribs jowl leberkas. Chicken swine biltong ham hock kielbasa sirloin ball tip hamburger meatloaf pork chop turkey pork belly tongue. Brisket bresaola sausage meatloaf ground round ball tip, drumstick pancetta capicola.
<p>Kielbasa leberkas sausage turducken landjaeger shoulder. Beef shoulder biltong prosciutto ball tip, leberkas strip steak. Ham hock salami ball tip, jowl porchetta ground round frankfurter jerky doner tenderloin short loin. Cow shankle turkey, filet mignon chuck rump kielbasa turducken. Beef jerky landjaeger leberkas pork loin pastrami tongue.
</div>
</div>
CSS：
#content {
position: fixed;
top: 50px;
left: 50px;
height: 100%;
width: 100%;
overflow-x: auto;
padding: 10px;
background-color: #cc99ff;
}
#content .scrollablecontent{
width: 2000px;
}
#x-axis {
position: fixed;
top: 0px;
left: 50px;
width: 100%;
height: 70px; /*pushes scroll bar down, out of sight */
overflow-x: auto;
overflow-y: hidden;
background-color: #99ccff;
text-align: center;
}
#x-axis .scrollablecontent {
width: 2000px;
}
#x-axis .scrollablecontent .tick {
margin-right: 75px;
}
#y-axis {
position: fixed;
top: 50px;
left: 0px;
height: 100%;
width: 70px; /*pushes scroll bar right, out of sight*/
overflow-x: hidden;
overflow-y: auto;
background-color: #99ccff;
}
#y-axis .scrollablecontent {
height: 2000px;
}
#y-axis .scrollablecontent .tick {
display: block;
margin-bottom: 15px;
margin-right: 20px; /*difference between widths of y-axis and y-axis scrollable content*/
text-align: right;
}
JS：
$('#content').on('scroll', function() {
$('#content, #x-axis').scrollLeft($('#content').scrollLeft());
$('#content, #y-axis').scrollTop($('#content').scrollTop());
});
$('#x-axis').on('scroll', function() {
$('#content').scrollLeft($('#x-axis').scrollLeft());
});
$('#y-axis').on('scroll', function() {
$('#content').scrollTop($('#y-axis').scrollTop());
});