javascript - 水平滚动 div CSS 中的 float 可见 div

Question

问题如下:

我有一个日历，用户可以在其中创建约会(使用 DHTMLX Scheduler Timeline View)，主要问题是 Scheduler 不支持可 ScrollView ，只能将日程安排放入 View 中。

我解决了前面的问题，创建了一个具有固定宽度的 div(这样我可以有一个更长的水平调度程序)并将其包装在一个允许水平滚动其内容的 div 中。

但是，我不清楚如何解决以下问题:

加载日历后，可以看到哪个div属于它的水平行

当用户水平滚动时(例如看到 7:00 PM) 您看不到需要在哪个带有颜色的 div 中创建约会!

所以我需要这样的东西，尽管用户水平滚动，div 仍然可见:

我已经尝试过类似下面的东西: 也可能是父容器的问题，因为如果以下工作可能会隐藏 div？

.visible-division{
    position:relative; /*Because the div with color is inside a table, and i need that still floating in the same row !!*/
    float:left;
    z-index:9000;/*a higher z-index in case something cover the div*/
}

没有任何运气..

我的 CSS

#calendar-container{
    width: 2000px;
}
#calendario {
    height: 900px;
    width: 100%;
    border: 1px solid #cecece;
}
.scrolling_container {
    height: 100%;
    overflow: auto;
}

还有我的标记

<div class="scrolling_container">
<div id="calendar-container">
        <div class="dhx_cal_container panel" id="calendario">
            <div class="dhx_cal_navline">
                <div class="dhx_cal_prev_button">&nbsp;</div>
                <div class="dhx_cal_next_button">&nbsp;</div>
                <div class="dhx_cal_today_button"></div>
                <div class="dhx_cal_date"></div>

                <div class="dhx_cal_tab" name="day_tab"></div>
                <div class="dhx_cal_tab" name="week_tab"></div>
                <div class="dhx_cal_tab" name="month_tab"></div>
                <div class="dhx_cal_tab" name="timeline_tab" style="right:280px;"></div>
            </div>
            <div class="dhx_cal_header"></div>
            <div class="dhx_cal_data"></div>
        </div>
    <div class="well text-right">
        <div>
            <a href="javascript:void(0)"> a link</a>
        </div>
    </div>
</div>

可以通过CSS解决吗？否则，我是否应该在滚动事件的情况下对其应用类？

感谢任何帮助，谢谢!

Answer 1

This可能会帮助您实现这一目标。

  .visible-division{
        position:fixed;
        width: /* specifiy */
        height: /* specify */
        top: /* specify */
        left: /* specify */
    }
    .scrolling_container {
        height: 100%;
        overflow: auto;
    }

虽然大多数浏览器不支持，但您可以尝试sticky位置值 position: sticky.