Question

我有一个div，其中包含一些信息，如图表。我们称之为container。在container内我还有另外两个divs。一个div是包含日期的标题，另一个div是与这些日期对应的数据。我希望将标题/日期div定位为固定。因此，当用户向下滚动时，它将跟随用户。我遇到的问题是，由于它的位置，它删除了overflow: hidden css样式。有没有办法让overflow: hidden保留一个样式为position: fixed或position: absolute的div？

这是一个简单的JSFiddle示例。从position: fixed中删除CSS样式.titleSection-right以查看所需的截止点

https://jsfiddle.net/2m16rtjp/1/

Answer 1

要overflow:hidden .titleSection-right工作，您需要在此元素上设置固定的width。在这种情况下，它的宽度需要等于parent宽度，.rightSide宽度为百分比var maxWidth = $(".rightSide").width() $(".titleSection-right").width(maxWidth)。所以我在你的JS中添加了这段代码

.titleSection-right

这样，width将.rightSide $(function() { var maxWidth = $(".rightSide").width() $(".titleSection-right").width(maxWidth) var dates = ['7/1/2016', '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', '7/6/2016', '7/7/2016', '7/8/2016', '7/9/2016', '7/1/2016', '7/2/2016', '7/3/2016', '7/4/2016', '7/5/2016', '7/6/2016', '7/7/2016']; var employees = ['Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', 'Smith, Bob', ]; var employeeProjections = ['Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll', 'Fulllllllll']; var container = $('#container'); var leftSide = $('.leftSide'); var rightSide = $('.rightSide'); var titleSectionLeft = $('.titleSection-left'); var titleSectionRight = $('.titleSection-right'); var resources = $('.resources'); var projections = $('.projections'); createHeaderDates(); createResources(); createProjections(16); function createHeaderDates() { dates.forEach((date) => { var dateDiv = $('<div class="date">' + date + '</div>'); titleSectionRight.append(dateDiv); }); } function createResources() { employees.forEach((employee) => { var employeeDiv = $('<div class="employee">' + employee + '</div>'); resources.append(employeeDiv); }); } function createProjections(numOfWeeks) { employees.forEach((employee) => { var projectionRow = $('<div class="projectionRow"></div>'); for(var i = 0; i < numOfWeeks; i++){ var projectionDiv = $('<div class="projection">' + employeeProjections[i] + '</div>'); projectionRow.append(projectionDiv); } projections.append(projectionRow); }); } });

请参阅此处： jsfiddle

或下面的代码段

body {
    background-color: azure;
}
#container {
    display: block;
    height: 8000px;
    width: 800px;
    background-color: darkolivegreen;
    margin: 0 auto;
}
.leftSide {
    width: 14%;
    display: inline-block;
    background-color: forestgreen;
    vertical-align: top;
}
.rightSide {
    width: 85%;
    display: inline-block;
    background-color: cadetblue;
    overflow: auto;
}
.titleSection-left {
    display: inline-block;
    width: 100%;
}
.employee {
    height: 30px;
}
.titleSection-right {
    background-color: royalblue;
    display: inline-block;
    white-space: nowrap;
    position: fixed;
    overflow:hidden;
}
.projectionRow {
    white-space: nowrap;
    height: 30px;
}
.projections {
    display: inline-block;
}
.projection {
    display: inline-block;
    border: 1px solid black;
    margin-right: 10px;
}
.date {
    margin-right: 10px;
    display: inline-block;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div id='container'>
            <div class='leftSide'>
                <div class='titleSection-left'>
                    <label>Resource</label>
                </div>
                <div class='resources'></div>
            </div>
            <div class='rightSide'>
                <div class='titleSection-right'></div>
                <div class='projections'></div>
            </div>
        </div>
    </body>

attr_accessor

将溢出应用于绝对定位的容器

1 个答案: