浮动水平滚动的DIV + CSS

我有用户可以创建约会日历（使用DHTMLX调度Timeline 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来解决？否则，在滚动事件的情况下，我是否应该使用类？

任何帮助表示感谢，谢谢！

来源

2015-09-29 Carlos Delgado

This可以帮助你做的伎俩。

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

尽管不为大多数的浏览器的支持，您可以尝试sticky位置值position: sticky。

来源

2015-09-29 18:31:48

希望这会有所帮助，将此类只有浮动DIV。

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

来源

2015-09-29 20:02:15 CreativePS

浮动水平滚动的DIV + CSS

回答

相关问题