javascript - 如何在水平滚动时修复左 div 并在垂直滚动时修复顶部（类似 Excel）？

Question

我想做一些像excel一样的东西。垂直滚动时固定顶部标题，水平滚动时固定左侧“标题”。

这是我的嵌入样式和 CSS 之后的 HTML

html:

<div id="resourceChart">
    <div class="leftPart ui-resizable">
        <div class="header"></div>
        <div class="leftContainer">
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>John Smith</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">My Second Work</div>
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>Bob Doe</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">Activity2</div>
        </div>
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
    </div>
    <div class="gantMainControl" id="gantControl">
        <div class="gant-compareitem" style="margin-top:41px;width:138px;margin-left:368px;"></div>
        <div id="gantHeader" class="header">
            <div class="headerRow">
                <div class="headerRowYear" id="headerYear">
                    <div class="headerCellYear" style="width:547px">2013</div>
                </div>
            </div>
            <div class="headerRow">
                <div class="headerCellMonth" style="width:46px">J</div>
                <div class="headerCellMonth" style="width:42px">F</div>
                <div class="headerCellMonth" style="width:46px">M</div>
                <div class="headerCellMonth" style="width:45px">A</div>
                <div class="headerCellMonth" style="width:46px">M</div>
                <div class="headerCellMonth" style="width:45px">J</div>
                <div class="headerCellMonth" style="width:46px">J</div>
                <div class="headerCellMonth" style="width:46px">A</div>
                <div class="headerCellMonth" style="width:45px">S</div>
                <div class="headerCellMonth" style="width:46px">O</div>
                <div class="headerCellMonth" style="width:45px">N</div>
                <div class="headerCellMonth" style="width:47px">D</div>
            </div>
        </div>
        <div class="container summary" style="margin-top:0px;">
            <div class="timelineContainer" style="width: 551px;">
                <div class="summaryColumn" style="width:297px;">
                    <div>94%</div>
                    <div style="width:100%;height:3px;background-color:yellow;"></div>
                </div>
                <div class="summaryColumn last" style="width: 247px;">
                    <div>2%</div>
                    <div style="width:100%;height:3px;background-color:yellow"></div>
                </div>
            </div>
        </div>
        <div class="container" style="display: block;">
            <div class="timelineContainer child" style="width: 551px;">
                <div class="timeline normal-timeline" style="margin-left:1px;width:298.4375px;">92%</div>
            </div>
        </div>
        <div class="container" style="display: block;">
            <div class="timelineContainer child" style="width: 551px;">
                <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">2%</div>
            </div>
        </div>
        <div class="container summary">
            <div class="timelineContainer" style="width: 551px;">
                <div class="summaryColumn last" style="width: 547px;">
                    <div>75%</div>
                    <div style="width:100%;height:3px;background-color:yellow"></div>
                </div>
            </div>
        </div>
        <div class="container" style="display: block;">
            <div class="timelineContainer child" style="width: 551px;">
                <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">72%</div>
            </div>
        </div>
        <div class="container" style="display: block;">
            <div class="timelineContainer child" style="width: 551px;">
                <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">3%</div>
            </div>
        </div>
    </div>

CSS：

html{
        background-color: #FFFFFF;
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
}

.leftPart {
    width:200px;
    float:left;
}

.leftPart .header {
    background-color:white;
    border:1px lightblue solid;
    display:inline-block;
    width:194px;
    height: 39px;
    padding-left: 5px;
    vertical-align: middle;

}

.toggleExpand {
    background-image: url(../../../Images/Icons/plus.png);
    width: 16px;
    height: 16px;
    margin-top: 2px;
}

.toggleMinus {
    background-image: url(../../../Images/Icons/minus.png);
    height: 16px;
    width: 16px;
    margin-top: 2px;
}
.leftPart .item {
    background-color:white;
    border:1px lightblue solid;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:194px;
    margin-top:-1px;
    height: 23px;
    padding-left: 5px;
}

.leftPartselector {
    width: 30px;
    float: left;
}

.leftPartselector .header {
    background-color:white;
    border:1px lightblue solid;
    display:inline-block;
    width:24px;
    height: 39px;
    padding-left: 5px;
    vertical-align: middle;

}


.leftPartselector .item{
    background-color:white;
    border:1px lightblue solid;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:24px;
    margin-top:-1px;
    height: 23px;
    padding-left: 5px;
}


.leftPart .child {
    text-indent: 20px;
}

.gantMainControl {
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
}

.leftContainer {
    overflow-y: auto;
    overflow-x: hidden;
}

.gantMainControl .header {
    width:90%;
    height: 40px;
}

.gantMainControl .headerRow {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    height: 21px;
}

.gantMainControl .headerRow .headerCellMonth {
    margin-right:-2px;
    margin-top: -1px;
    background-color:white;
    display:inline-block;
    border:1px solid lightblue;
    white-space:nowrap;
    overflow:hidden;
    text-align:center;
}
.gantMainControl .headerRow .headerCellYear {
    background-color:white;
    display:inline-block;
    border:1px solid lightblue;
    text-align:center;
    margin-right:-1px;
}

.gantMainControl .headerRow .headerRowYear {
    display:inline-block;
    margin-bottom: -5px;
}

.gantMainControl .container {
    border: hidden 1px;
    margin-top: -1px;
    margin-left: 1px;
    height: 25px;
}

.gantMainControl .container .timelineContainer {
   display:inline-block;
    height: 24px;
}

.gantMainControl .container .timelineContainer:hover{
   background-color:#d0e9fa;
}


.gantMainControl .container .timeline {
    height: 18px;
    background-color: #97C9EB;
    text-align: center;
    line-height: 18px;
    margin-top: 1px;
    display: inline-block;
    vertical-align: bottom;
}

.gantMainControl .container .normal-timeline {
    border: 1px white solid;
}

.summaryColumn {
    height: 22px;
    color: white;
    text-align: center;
    display: inline-block;
    background-color: grey;
    border-right: 1px solid white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

.summaryColumn div {
      white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

div.ui-tooltip {
    max-width: 500px;
}
.tooltip {
    font-size: 10px;
}
.tooltip td {
    padding-right: 5px;
    padding-top: 5px;
}

.tooltip span{
    font-weight: bold;
    margin-right: 5px;  
}

.gantt-pager {
    padding-right: 4px;
    margin-top: 3px;
    margin-left: 15px;
}


.gant-compareitem {
    background-color: rgba(148, 202, 252, 0.3); /* browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#97C9EBff', endColorstr='#97C9EBff'); /* IE */
    height: 99%;
    z-index: 1;
    position: absolute;
    border-left: 2px solid purple;
    border-right: 2px solid purple;
}

score 1 · Accepted Answer

尝试这个：

CSS：

.HeaderRow {
position:fixed;//For vertical purposes
}

Javascript（JQUERY）：

var posWas = $(window).scrollLeft();
$(window).bind('scroll', function(){
var posIs = $(window).scrollLeft();
if(posWas !== posIs){
//Scrolled Horizontal
$('.headerRow').css("position" , "relative");
$('.headerRow').css("left" , posIs );
$('.headerRow').css("position" , "fixed" );
posWas = posIs;//Save it for the Next Run
}
//Scrolled vertically keep as you are
});

如果您想修复另一个类或 div，请在代码中进行更改。

score 0 · Accepted Answer

With the help of the comment from mario, I've been able to do it using 2 lines of javascript and css.

Here is the fiddle:

http://jsfiddle.net/QBLdM/4/

and here is the code:

Javascript:

$('#resourceChart').scroll(function () {
    $(this).find('.sticky').css('left', $(this).scrollLeft());
});

$('#resourceChart').scroll(function () {
    $(this).find('.stickyv').css('top', $(this).scrollTop());
});

HTML:

<div id="resourceChart">
    <div id="mainSuperContainer">
        <div class="leftPart ui-resizable sticky">
            <div class="header"></div>
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>John Smith</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">My Second Work</div>
            <div class="item parent">
                <div style="float:left;" class="leftcollapse toggleMinus"></div>Bob Doe</div>
            <div class="item child" style="display: block;">My Work</div>
            <div class="item child" style="display: block;">Activity2</div>
            <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
        </div>
        <div class="gantMainControl " id="gantControl">
            <div id="gantHeader" class="header stickyv">
                <div class="headerRow">
                    <div class="headerRowYear" id="headerYear">
                        <div class="headerCellYear" style="width:547px">2013</div>
                    </div>
                </div>
                <div class="headerRow">
                    <div class="headerCellMonth" style="width:46px">J</div>
                    <div class="headerCellMonth" style="width:42px">F</div>
                    <div class="headerCellMonth" style="width:46px">M</div>
                    <div class="headerCellMonth" style="width:45px">A</div>
                    <div class="headerCellMonth" style="width:46px">M</div>
                    <div class="headerCellMonth" style="width:45px">J</div>
                    <div class="headerCellMonth" style="width:46px">J</div>
                    <div class="headerCellMonth" style="width:46px">A</div>
                    <div class="headerCellMonth" style="width:45px">S</div>
                    <div class="headerCellMonth" style="width:46px">O</div>
                    <div class="headerCellMonth" style="width:45px">N</div>
                    <div class="headerCellMonth" style="width:47px">D</div>
                </div>
            </div>
            <div id='mainTimelineContainer'>
                <div class="container summary" style="margin-top:0px;">
                    <div class="timelineContainer" style="width: 551px;">
                        <div class="summaryColumn" style="width:297px;">
                            <div>94%</div>
                            <div style="width:100%;height:3px;background-color:yellow;"></div>
                        </div>
                        <div class="summaryColumn last" style="width: 247px;">
                            <div>2%</div>
                            <div style="width:100%;height:3px;background-color:yellow"></div>
                        </div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:298.4375px;">92%</div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">2%</div>
                    </div>
                </div>
                <div class="container summary">
                    <div class="timelineContainer" style="width: 551px;">
                        <div class="summaryColumn last" style="width: 547px;">
                            <div>75%</div>
                            <div style="width:100%;height:3px;background-color:yellow"></div>
                        </div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">72%</div>
                    </div>
                </div>
                <div class="container" style="display: block;">
                    <div class="timelineContainer child" style="width: 551px;">
                        <div class="timeline normal-timeline" style="margin-left:1px;width:547.5px;">3%</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

#mainTimelineContainer {
    padding-top:42px;
}
#mainSuperContainer {
    width:900px;
    position:relative;
}
.sticky {
    position:absolute;
    left:0;
    top:5;
}
.stickyv {
    position:absolute;
    left:0;
    top:5;
}
#resourceChart {
    width:600px;
    height:150px;
    overflow:auto;
}
.gantMainControl {
    padding-left:200px;
}
.gantMainControl .header {
    width:90%;
    height: 40px;
    z-index:1;
    padding-left:200px;
}

.leftPart {
    width:200px;
    float:left;
    z-index:2;
}
.leftPart .header {
    background-color:white;
    border:1px lightblue solid;
    display:inline-block;
    width:194px;
    height: 39px;
    padding-left: 5px;
    vertical-align: middle;
}

score 0 · Accepted Answer

位置固定和一些更多的 CSS，#summary div 添加到 HTML，这是一个Fiddle，如果这是你想要的......

.leftPart {
  position: fixed;
  width:200px;
  float:left;
  z-index: 100;
}

.gantMainControl .header {
  position: fixed;
  left: 211px;
  width:90%;
  height: 40px;
  z-index: 100;
}

javascript - 如何在水平滚动时修复左 div 并在垂直滚动时修复顶部（类似 Excel）？

3 回答 3

Related

Reference