使日历组件在x和y轴上可滚动

Question

我正在使用自己的HTML / CSS创建日历组件 它可以在水平标题（x轴）上有多个类别，并且在垂直方向（y轴）下最多有24个时隙。

垂直滚动时，类别标题必须始终可见，并且在滚动时必须始终显示时间段。

我如何通过css实现这一目标？

查看截图以了解我想要的内容（图片中更多的跟踪标题会导致内容溢出）。

也许把它作为我的sinple html结构：

<div class="calendar">
    <div class="calendarColumnHeaders"></div>
    <div class="calendarGrid">
        <div class="timeSlotsColumn"></div>
        <div class="tracksContainer"></div>
    </div>
</div>

由于

Answer 1

给<div class="tracksContainer"></div>一个名为stick

的额外课程

添加 Css：

.stick {
    position:fixed;
    top:0px;
}

不幸的是，你确实需要一些 Jquery

jQuery - 计算贴纸div的位置，并在页面滚动到那么远时使其位置固定。

$(document).ready(function() {
    var s = $(".tracksContainer");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

Answer 2

overflow-x: scroll; //horizontal
overflow-y: scroll; //vertical