Question

问题如下：

我有一个日历，用户可以在其中创建约会（使用DHTMLX Scheduler Timeline View），主要问题是Scheduler不支持可滚动视图，只是将日程安排到视图中。

我解决了上一个问题，创建了一个具有FIXED宽度的div（这样我可以使用更长的水平调度程序）并将其包装在允许水平滚动其内容的div中。

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

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

当用户滚动水平时（例如，见下午7点）您无法查看创建约会所需的颜色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。

Answer 2

希望这会有所帮助，只将此类应用于浮动div。

.floating{
position:fixed;
top:20px;
right:0px;
width:80%; /* as required */
}

在水平可滚动div CSS中浮动可见div

2 个答案: