水平滾動div CSS中的浮動可見div

Question

問題如下：

我有一個日歷，用戶可以在其中創建約會（使用DHTMLX Scheduler 時間軸視圖 ），主要問題是Scheduler不支持可滾動視圖，僅將時間表適合視圖。

我解決了前面的問題，創建了一個FIXED寬度的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

這可以幫助您解決問題。

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

盡管大多數瀏覽器均不支持，但您可以嘗試使用粘性位置值position: sticky 。

Answer 2

希望這會有所幫助，僅將此類應用於浮動div。

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