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

Apply overflow hidden to an absolute positioned container

本文关键字：定位 溢出 隐藏 应用于      更新时间：2023-09-26

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

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

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

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

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

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

请参阅此处：jsfiddle

或下方的片段

$(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>

相关文章：