将溢出隐藏应用到绝对定位的容器

Question

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

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

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

Answer 1

为了使.titleSection-right 上的overflow:hidden 工作，您需要在此元素上设置一个固定的width。在这种情况下，它的宽度需要等于parents 宽度，分别等于具有百分比宽度的.rightSide。所以我在你的 JS 中添加了这段代码

var maxWidth = $(".rightSide").width()
$(".titleSection-right").width(maxWidth)

这样，.titleSection-right 将拥有.rightSide 的width

请看这里：jsfiddle

或下面的sn-p

$(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);
        });     
    }
});

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>